CSS: How to insert guitar chords into the text in a space-saving manner?

By10tel

I create HTML documents with song lyrics for printing. The lyrics are as large as possible. So, the more verses there are, the smaller the text.

Now I want to add chord information. This causes the line height to swell enormously, and the text no longer fits on A4:

Which CSS raises the chords while maintaining the line height? Here's what I experimented with:

 akk_c::before {  color:          red;  background:     #eee;  vertical-align: super;  font-family:    arial, sans-serif;  font-size:      80%; } akk_c::before   { content: "C"; }

(1 votes)
Loading...

Similar Posts

AI | Is artificial intelligence taking over the Earth?

ByRobinPxGF

Good evening everyone. Some doubt that artificial intelligence even exists; others believe it will dominate the world in a few years. IFS explains why, as is so often the case, the truth lies somewhere in the middle. Artificial intelligence (AI) is currently one of the most polarizing topics. Misconceptions, expectations, and fears play a role….

Subscribe
Notify of
10 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
medmonk
medmonk
1 year ago

Your previous implementation is not valid and can make it easier for you to read the value of the chord in a data attribute. The respective word is then nested in a and formatted with CSS.

HTML:


  
 
   Sie putzen
   klirrend
   am Geschirr...

CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

The above structure perfectly aligns the chord to the element. It doesn’t matter what you set the line-height. The chord automatically moves along as it depends on the .

You can also alienate the element for this purpose, as you like it for the purpose of incorporating icons. It would be a little shorter.

klirrend
2
verreisterNutzer
verreisterNutzer
1 year ago
Reply to  medmonk

Perfect, you can’t explain it better.

1
10tel
Author
10tel
1 year ago
Reply to  medmonk

Looks good, unfortunately, doesn’t work. (Bin the next song)

If the Maibaum is again at Dorfplatz ≤/akk_f> (if Maibaum is again at Dorfplatz

At [Firefox:Survey], the style for .cord is completely ignored, what can that be?

 
0
10tel
Author
10tel
1 year ago
Reply to  10tel

span was accepted, span.cord but not… funny

span {
  min-width: 5px;
  background: #fee;
}
span.chord {
  position: relative;
  margin-left: 11px;
}
span.chord[data-achord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}
0
guteantwort626
guteantwort626
1 year ago
Reply to  medmonk

Your previous implementation is not valid

Do you think about your own definition of an HTML element? This would be valid in HTML5 if instead of an _ one – would be used, see https://www.mediaevent.de/html/custom-elements.html

0
medmonk
medmonk
1 year ago
Reply to  guteantwort626

I know you can create your own elements. It was actually about the spelling. The same scheme applies to the data attribute.

0
10tel
Author
10tel
1 year ago

Error found. I wrote cordage with 4 letters, you chord with 5 letters. I only noticed a correct line in the editor was under a faulty line. The faulty one was shorter.

1
10tel
Author
10tel
1 year ago

Interim report: Thank you, your proposal works when it alone in the document. Now I’m looking for why it doesn’t work in my environment.

0
medmonk
medmonk
1 year ago

You have to take the source code as I have specified it. Make up the unnecessary chip in CSS, as well as your akk_f etc.

is the style for .cord completely ignored, what can that be?

The class is called chord (English for chord 😉 ). You must replace your “akk” with a or element and then enter the desired chord in the data attribute. Then it works.

Your HTML should look like this:

Dorfplatz 
steht(wenn der 
Maibaum wieder am 
Dorfplatz 
steht)

Your CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}
0
10tel
Author
10tel
1 year ago

acord = chord (I tried, maybe chord is a system term – no)

0