Html Question posted in
Some basic documentation can be found here.

In HTML, is there a way to prevent the ♭ character from shifting down?

I’m trying to write a simple HTML page to output music chords. I display randomly generated chords to practice chord changes (like using flashcards).

When I output a chord containing a "flat" symbol, the whole chord appears to jump down — it increases the vertical height of the enclosing <div> and appears at the bottom. The Other chords (with a "sharp" or without) appear as expected.

JSFiddle to demonstrate: https://jsfiddle.net/blatwell9/qjfcLtdv/3/

Is there a way to prevent the shift down from happening?

Shift down example

The code to demonstrate the effect. Note the effect when the backgrounds of the <div> and the chord <span> are displayed:

body {
  font-family: sans-serif;
}

.chord-div {
  font-size: 3em;
  background: lightgreen;
  margin: 0.2em;
  float: left;
}

.chord-div span {
  background: lightblue;
  border: 1px blue solid;
}
<div class="chord-div">
  <span>A</span>
</div>
<div class="chord-div">
  <span>A&sharp;</span>
</div>
<div class="chord-div">
  <span>A&flat;</span>
</div>
Tags:

2

Answers


  1. 0

    You need to define line-height. In this case 1 works.

    * {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.chord-div {
  font-size: 3em;
  background: lightgreen;
  margin: .1em;
  float: left
}

#sharp {
  background: lightblue;
  border: 1px blue solid;
  line-height: 1;
}

#flat {
  background: lightblue;
  border: 1px blue solid;
  line-height: 1;
}
    <div class="chord-div">
  <span id="sharp">A&sharp;</span>
</div>
<div class="chord-div">
  <span id="flat">A&flat;</span>
</div>
    Login or Signup to reply.
  2. 0

    Instead of wasting time explaining why not to use float see this post. The example has two <section>s:

    • The first <section> contains only inline elements (ex. <span>, <mark>, <strong>, etc.). They naturally sit next to each other.

    • The second <section> contains block elements (ex. <div>, <p>, <section>, etc.). They naturally take up the whole line they sit in so they stack one on top off the other. float is supposed to arrange them inline.

    As you can see the floating <div>s are cock-eyed and the ♭ symbol has nothing to do with it. Just use inline elements, flexbox or grid layouts.

    @import url('https://fonts.cdnfonts.com/css/opus');
* {
  margin: 0;
  padding: 0;
}

:root {
  3ch/1.2 "Opus" sans-serif;
}

mark {
  margin: 0.1rem;
  font-size: 3rem;
  background: lightgreen;
}

div {
  float: left;
}
    <section>
  <mark>A&sharp;</mark>
  <mark>A&#119082;</mark>
  <mark>A&flat;</mark>
  <mark>A&#119083;</mark>
  <mark>A&natur;</mark>
</section>

<section>
  <div>
    <mark>A&sharp;</mark>
  </div>
  <div>
    <mark>A&#119082;</mark>
  </div>
  <div>
    <mark>A&flat;</mark>
  </div>
  <div>
    <mark>A&#119083;</mark>
  </div>
  <div>
    <mark>A&natur;</mark>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search