Search code examples
htmlcssvertical-alignment

Align the capline (top of text) with different size fonts

I have a set of numbered subsections on a web page, each of which has an associated title in line with the section's ordinal (number). It's essentially an ordered list where each item contains arbitrary content.

The design calls for (a) the ordinal of each section to be approximately twice as tall as the title text, (b) the capline (top) of the title (rendered FULLCAPS) to be aligned with the capline of the ordinal.

The title text is dynamic, and may take up anywhere from 1-4 "lines" depending on length.

I've tried using vertical-align:top within elements formatted using table-cell, and it is very close to the desired look:

.title_line {
  display: table;
}
.title_line .ordinal {
  display: table-cell;
  vertical-align: top;
  font-size: 4em;
}
.title_line .title {
  display: table-cell;
  vertical-align: top;
  font-size: 2em;
  text-transform: uppercase;
}
<body>
  <div class="title_line">
    <div class="ordinal">3</div>
    <div class="title">The capline (top) of this text should be aligned with the top of the ordinal.</div>
  </div>
</body>

enter image description here

But there is a visible difference in the vertical gap above the ordinal as compared to the title text.

Is there any way to specify capline alignment for text of different size?

Solution

  • This can be fixed by setting a line-height of 1em.

    .title_line {
    display: table;
}

.title_line .ordinal {
    vertical-align: top;
    display: table-cell;
    line-height: 1em;
    font-size: 4em;
}

.title_line .title {
    display: table-cell;
    vertical-align: top;
    font-size: 2em;
    text-transform: uppercase;
}
    <body>
  <div class="title_line">
    <div class="ordinal">3</div>
    <div class="title">The capline (top) of this text should be aligned with the top of the ordinal.</div>
  </div>
</body>

    This effectively removes the space between the actual font and how it is rendered. If you add an outline or background to .ordinal, you can see how this works:

    span {
  vertical-align: top;
  font-size: 4em;
  outline: 1px solid red;
}
.fix {
  line-height: 1em;
}
    <span>3</span>
<span class="fix">3</span>