Leading trim with font metrics

While we wait for leading-trim to be available in browsers... https://www.w3.org/TR/css-inline-3/#leading-trim

by phloe

HTML

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Inter:wght@700&family=Titillium+Web:wght@700&display=swap" rel="stylesheet">

<select id="select">
	<option value="fatface">Abril Fatface</option>
	<option value="inter">Inter</option>
	<option value="titillium">Titillium Web</option>
</select>

<main id="main" class="fatface">
  <article>
    <h3 class="text-crop">Trimming leading on text is easy as pie</h3>
    <span class="label"><span class="text-center text-size">Label</span></span>
    <p class="text-crop text-size">Lowercase letters are dominant in body text so cropping to x-height and setting the line-height as a multiple of that can make a lot of sense. You could even scale body text so that x-height matches a specific size.</p>
    <blockquote>
      <p class="text-crop text-size">
      &ldquo; In quas cetero sea, usu facilisi mnesarchum consectetuer ne.
      </p>
    </blockquote>
    <p>
    Loosely based on <a href="https://twitter.com/kevinmpowell">@kevinmpowell</a>'s <a href="https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce">trimming technique</a> and <a href="https://twitter.com/iamvdo">@iamvdo</a>'s <a href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">blog post</a>.
    </p>
  </article>
  <article>
    <h3 class="text-crop">Trimming leading on text is easy as pie</h3>
    <p class="text-crop text-size">Lorem ipsum dolor sit amet, ne has odio dolore delicatissimi, ex affert denique temporibus mel. Ei qui eirmod nostrud. Ei vix malorum accumsan incorrupte. In quas cetero sea, usu facilisi mnesarchum consectetuer ne. Ius id dolor melius. Falli ullamcorper ne mel. Audire delectus has in, no eos altera detracto luptatum.</p>
  </article>
  <article>
    <h3 class="text-crop">Trimming leading on text is easy as pie</h3>
    <p class="text-crop text-size">Lorem ipsum dolor sit amet, ne has odio dolore delicatissimi, ex affert denique temporibus mel. Ei...

CSS

body {
  margin: 0;
  padding: 1rem;
  background-color: #DDD;
}

select {
  margin-bottom: 1rem;
}

article {
  background-color: #FFF;
  padding: 2rem;
}
article + article {
  margin-top: 1rem;
}

h3 {
  margin: 0;
  --line-height: 1.125;
  line-height: var(--line-height);
  font-size: 3rem;
  background-color: rgba(0, 0, 255, 0.1);
}

article > p {
  margin: 2rem 0 0;
  --text-size: 0.5;
  --text-line-height: 3.5;
  --text-height: var(--x-height);
  background-color: rgba(0, 0, 255, 0.1);
}

h3 + p {
  margin-top: 3rem;
}

blockquote {
  margin: 3rem 2rem;
}

blockquote > p {
  margin: 0;
  --text-size: 1.25;
  --text-line-height: 1.25;
  font-style: italic;
  background-color: rgba(0, 0, 255, 0.1);
}

.label {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: #333;
  color: #FFF;
  line-height: 0.875rem;
  --text-size: 0.625;
  --text-line-height: 1.4;
}

/* While we wait for https://www.w3.org/TR/css-inline-3/#leading-trim */

.text-size {
  --font-size: calc(var(--text-size) / var(--text-height, var(--cap-height)));
  font-size: calc(var(--text-unit, 1rem) * var(--font-size));
  --line-height: calc(var(--text-line-height, var(--line-height-normal)) * var(--text-height, var(--cap-height)));
  line-height: var(--line-height);
}

.text-center {
	display: inline-block;
	transform: translateY(calc(-1em * (((var(--line-height-normal) / 2) - var(--descender)) - (var(--text-height, var(--cap-height)) / 2))));
}

.text-crop::before {
	content: "";
  display: table;
  margin-bottom: calc(-1em * (((var(--line-height, var(--line-height-normal)) - var(--line-height-normal)) / 2) + var(--ascender) - var(--text-height, var(--cap-height))));
}

.text-crop::after {
	content: "";
  display: table;
  margin-top: calc(-1em * (((var(--line-height, var(--line-height-normal)) - var(--line-height-normal)) / 2) + var(--descender)));
}

/*
  Metrics below were collected via...

JavaScript

select.onchange = (event) => {
  main.className = event.target.options[event.target.selectedIndex].value;
};