I will reply within 1 business day.
Control over the vertical axis of web content and more specifically text content has long been the holy grail of component layout. Join me in taking a look at what's possible with a few lines of modern CSS.
Control over the vertical axis of web content and more specifically text content has long been the holy grail of component layout. Join me in taking a look at what's possible with a few lines of modern CSS.
Trimming the extra spacing from the bounding box of fonts makes the total height of containing elements predictable meaning that text in adjacent columns can perfectly aligned making for a more comfortable reading experience such as we are accustomed to seeing in print media.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Yes, but only with a SCSS library called SassLine. Whilst SassLine gave great results it forces you to use SCSS which could lead to bloat & requires manual font height calculations. Integrating this into a modern front end could be challenging.
Firstly we need to have a baseline grid to align our text to. We can achieve this with a repeating linear gradient which is well supported in all browsers.
.wrapper {
background-image: repeating-linear-gradient(
0deg,
transparent 0,
transparent calc(1rem - 1px),
var(--light-300) calc(1rem - 1px),
var(--light-300) 1rem
);
}The secret ingredient is the new text-box property which trims vertical space from web fonts. The font's bounding box now starts at the font's ascender and ends at the descender. This can be very useful for vertical rhythm, text in buttons or aligning icons to fonts.
This feature has partial browser implementation coverage. Check individual browser support before deployment.
Learn more* {
text-box-edge: cap alphabetic;
text-box-trim: trim-both;
}This can be very useful for vertical rhythm, text in buttons or aligning icons to fonts.
The next step is to offset the text so it sits on the baseline. We'll use padding for the top and margin on the bottom to avoid issues with collapsing margins.
h3 {
margin-block: 0 2rem;
padding-block-start: calc(1rem - 1cap);
line-height: 1.7;
}We can then take the grid height of 1rem and then remove the height of the font giving us the offset value.