Help CSS

[erzonmr]

Greetings to the creator of this library, greetings to those who pass by :-)

Guys, I have a problem, I'm converting chord.pro files to HTML, but I don't know how to implement the CSS in my result, the resulting song looks messy ... can someone guide me...?

[soondor81]

@erzonmr

This is a sheet music site I created using ChordSheetJS.
https://www.bomione.co.kr

When you use

new ChordSheetJS.HtmlDivFormatter().format(song);

HTML is generated with classes applied according to the format. You can then assign appropriate styles to these classes.

<div class="chord-sheet">
	<div class="paragraph">
		<div class="row">
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">When I am </div>
			</div>
			<div class="column">
				<div class="chord">Eb</div>
				<div class="lyrics">down </div>
			</div>
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">and, </div>
			</div>
			<div class="column">
				<div class="chord">Ab</div>
				<div class="lyrics">oh </div>
			</div>
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">my soul, so </div>
			</div>
			<div class="column">
				<div class="chord">Eb</div>
				<div class="lyrics">weary </div>
			</div>
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">When troubles </div>
			</div>
			<div class="column">
				<div class="chord">Gm</div>
				<div class="lyrics">come </div>
			</div>
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">and </div>
			</div>
			<div class="column">
				<div class="chord">Ab</div>
				<div class="lyrics">my </div>
			</div>
			<div class="column">
				<div class="chord"></div>
				<div class="lyrics">heart burdened </div>
			</div>
			<div class="column">
				<div class="chord">Bb7</div>
				<div class="lyrics">be</div>
			</div>
		</div>
		<div class="row">
			...
		</div>
		...
	</div>
</div>

CSS example

.chord-sheet {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.verse {
    padding: 12px;
    border-radius: 6px;
}

.chorus {
    padding: 12px;
    border-radius: 6px;
}

.bridge {
    padding: 12px;
    border-radius: 6px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0!important;
    padding-right: 0!important;
}

.chord {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    min-height: 1.4em;
    margin-bottom: 3px;
    margin-right: 6px;
}

.lyrics {
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .chord-sheet {
        font-size: 0.6rem;
    }
    .chord {
        font-size: 0.8rem;
    }
}

[erzonmr]

thank you very much, I will try it

[erzonmr]

Hi @soondor81, I'm using it and you see words stuck together.... :-(

[soondor81]

@erzonmr
If necessary, add margin to the .column appropriately.

.column {
    ...
    margin-right: 6px;
}

[erzonmr]

:-( sigue non-functioning

[martijnversluis]

@erzonmr Did this solve your issue?