CSS Rhythmic Sizing

[Forwarding for the archives]

-------- Forwarded Message --------
Subject:  CSS Rhythmic Sizing
Date:  Fri, 05 Jan 2018 16:09:26 +0000
From:  Jan Nicklas
To:  Koji Ishii, fantasai



Hi Koji, hi Elika,

I was considering to hand in a new CSS proposal but came across your idea which is similar to my idea.
For the last ten years I worked on several huge projects for different customers and one problem 
occurred over and over again.

In our designs we tend to use a "visual border" of a text row to measure distances to the next 
box/image/text block.
This visual border is the top of the capital letter M and the bottom of the capital letter M. (M 
works for most fonts).
Designs with this methodology can be found almost everywhere on store fronts signs, tv-ads, 
newspapers, magazines, traffic signs, etc.

Unfortunately similar designs are really hard to achieve in todays browsers because of the 
way line-height is implemented.
Right now setting a line-height to e.g. 20px will reserve a box of 20px height and will vertically 
center the text inside it (as long as it does not wrap).

My idea is to split up line-height into 2 values: line-height-top and line-height-bottom (similar to 
overflow which was split into overflow-x and overflow-y).
So it would still be possible to keep the current behaviour by just setting line-height:20px but it 
would also allow to have a more granular control e.g. setting line-height-top: 5px and 
line-height-bottom: 15px

Do you believe this an improvement worth to propose and would you like it to be added to your 
proposal or as a separate one?

Regards
Jan



-- 

Jan Nicklas.
Senior Frontend Engineer.


--

*E-Business. Seit 1995.****Namics.*


Namics AG, Bederstrasse 1, CH-8002 Zürich
Direkt +41 44 228 67 77
jan.nicklas@namics.com <mailto:jan.nicklas@namics.com>

@jantimon <https://twitter.com/jantimon>


namics.com 
<http://www.namics.com/?utm_source=Mailfooter&utm_medium=Mail&utm_term=&utm_content=Website&utm_campaign=Mailfooter>, 
blog.namics.com 
<http://blog.namics.com/?utm_source=Mailfooter&utm_medium=Mail&utm_term=&utm_content=Blog.Namics&utm_campaign=Mailfooter>, 
twitter.com/namics <http://twitter.com/namics>


--