Skip to content

Instantly share code, notes, and snippets.

@asyarb
Last active May 12, 2022 00:40
Embed
What would you like to do?
Capsize implemented using CSS variables
:root {
--root-font-size: 16;
--root-line-height: 1.2;
font-size: var(--root-font-size);
line-height: var(--root-line-height);
}
.text {
--font-size: 24;
--line-height: 1.25;
font-size: calc((var(--font-size) / var(--root-font-size)) * 1rem);
line-height: var(--line-height);
}
.font-inter {
--cap-height: 2048;
--ascent: 2728;
--descent: -680;
--line-gap: 0;
--units-per-em: 2816;
--x-height: 1536;
font-family: 'Inter var', system-ui;
}
.capsize {
--line-height-numeric: calc(
var(--font-size) * var(--line-height, var(--root-line-height))
);
--absolute-descent: max(var(--descent), -1 * var(--descent));
--cap-height-scale: calc(var(--cap-height) / var(--units-per-em));
--descent-scale: calc(var(--absolute-descent) / var(--units-per-em));
--ascent-scale: calc(var(--ascent) / var(--units-per-em));
--line-gap-scale: calc(var(--line-gap) / var(--units-per-em));
--content-area: calc(
var(--ascent) + var(--line-gap) + var(--absolute-descent)
);
--line-height-scale: calc(var(--content-area) / var(--units-per-em));
--line-height-normal: calc(var(--line-height-scale) * var(--font-size));
--specified-line-height-offset: calc(
(var(--line-height-normal) - var(--line-height-numeric)) / 2
);
--cap-height-trim-param: calc(
var(--ascent-scale) - var(--cap-height-scale) + var(--line-gap-scale) / 2
);
--cap-height-trim: calc(
var(--cap-height-trim-param) - var(--specified-line-height-offset) /
var(--font-size)
);
--baseline-trim-param: calc(var(--descent-scale) + var(--line-gap-scale) / 2);
--baseline-trim: calc(
var(--baseline-trim-param) - var(--specified-line-height-offset) /
var(--font-size)
);
}
.capsize::before {
content: '';
display: table;
margin-bottom: calc(var(--cap-height-trim) * -1em);
}
.capsize::after {
content: '';
display: table;
margin-top: calc(var(--baseline-trim) * -1em);
}
.no-capsize::before,
.no-capsize::after {
content: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment