Leading Trim Toggle

leading-trim.md

Leading Trim Toggle

Below is a CSS snippet you can use to turn leading trimming on and off per element. Otherwise known as line-height crop or text crop.

/* leading-trim.css */

* {
  --line-height: 1.5;
  --cap-height: 0.75;
  --leading-trim-over-adjustment: 0em;
  --leading-trim-under-adjustment: 0em;

  --unset: unset;
  --leading-trim: var(--unset);
  --leading-trim-over: var(--unset);
  --leading-trim-under: var(--unset);
}

::before, ::after {
  display: block;
}

::before {
  content: var(--leading-trim, var(--leading-trim-over, unset));
  margin-bottom: calc((var(--cap-height) - var(--line-height, 1)) * 0.5em - var(--leading-trim-over-adjustment));
}

::after {
  content: var(--leading-trim, var(--leading-trim-under, unset));
  margin-top: calc((var(--cap-height) - var(--line-height, 1)) * 0.5em - var(--leading-trim-under-adjustment));
}

To crop an element just apply --leading-trim: '', --leading-trim-over: '' or --leading-trim-under: ''.

For example:

.button {
  --leading-trim: '';
}

Each font and browser works slightly differently so this is not perfect, but it gives a good result. You can adjust the cap-height depending on the character height for a specicic font. View a demo of it in action.