Report on baseline research
Until browsers implement the specs for the css line-grid, we've found options to create a baseline that should work with the minimal human work possible.
###Some background
[…] common sense would suggest that the total vertical margin space here would be 90px (20px + 40px + 30px), but instead the margins all collapse into a single 40px margin (the highest of the three). This is helpful in most cases since there is no need to redefine any of the top margins to remove the extra vertical space. (from https://css-tricks.com/almanac/properties/m/margin/.
Idea for implementations
1 create a baseline grid background using gradient css to test the elements.
2 set the line-height of all element as the basegrid as you want (for example 24px)
3 using the idea from https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce we create pseudo element to set the grid of each element on the baseline. The element before is used to push the text on the baseline (with a height
of Xpx) and the element after is use to pull the content on the baseline (with a margin-top
of -Xpx).
4. Until we can build a snap polifyll, any fontsize for each font-face used must be tested.
Cons: the problem is that each font has it's own different em square and a different sized for ascenders and descenders. This means that we must be aware that the export change will depends on browsers and OS. For now, since chromium is the one capable of using print size in the css, we focus on chromium. Still, some testing is required.
javascript ideas for automatisation
- we can use https://opentype.js.org/font-inspector.html to find the value of the descender and ascenders and em-square, x-height (that would be used for images) for each font;
- define the ratio of the font on the baseline and from those number define the value of the before/after pseudo elements.