Re: CSS Rhythmic Sizing

[Forwarding for the archives]

On 01/08/2018 03:03 PM, Jan Nicklas wrote:
 > Hey fantasai
 >
 > thank you so much for your fast response.
 > It's good to know that you are already working hard to address these requirements.
 >
 > If I understand https://lists.w3.org/Archives/Public/www-style/2016May/0090.html
 > correctly then this might be exactly what I would love to see in a future version of css.

Cool!

 > Another example is aligning the visual line of headlines inside a box or a button:
 >
 > TextInBox.jpg

I suspect this is a case of wanting 'align-content: baseline' on the buttons to work.
The Box Alignment spec has this specified, although it is not implemented across all
the CSS layout modes yet:
   https://www.w3.org/TR/css-align-3/#content-distribution

(Your comments are making me realize this specification needs many more examples
and illustrations...)

 > So I thought maybe a new CSS property could support us to build solutions
 > without transform or vertical negative margins. That lead to the idea of
 > line-height-top and line-height-bottom.
 >
 > But I really like your idea even more of letting the browser calculate the
 > snap point instead of having many magic numbers all over the css.

Glad to hear it. :)

 > Imho the goal would be to let the browser calculate the following bounding box:
 > final.jpg
 > The snap points would be the top and bottom of the captial M:
 >
 > CSS_Rhythmic_Sizing.jpg
 >
 > Would *leading: never* allow that?

“leading: never” would help to make these kinds of alignments, I think,
but perhaps not quite... I see from your diagram that you are wanting
to drop not just the half-leading above the line, but the difference
between the top of the ascender and the top of the cap height. Which
totally makes sense! But isn't something I'd really thought about. :)

We would have to modify the proposal to allow specifying which font
metric to trim down to, then.

 > Is there anything I can do to support this topic?

Yes! Let's do two things:

   - First, copy our discussions into a public archive. If you are comfortable
     posting your email address in public, probably the best way would be to
     redraft this email you just sent me with all the attachments correctly
     attached ;) and send it to www-archive@w3.org. I will then forward along
     my replies as well. Alternately, if you prefer, you can send the corrected
     email to me and I will edit out your email address and forward it over
     with just your name. This way W3C has a record of the conversation, and we
     can refer back to it as needed.

   - Second, draft up a good overview of the problem: what exactly you are
     trying to accomplish in the layout that is problematic, so that everyone
     can understand what we're trying to do. And post this as a new issue in the
     CSSWG's GitHub repository here: https://github.com/w3c/csswg-drafts/issues
     where we can track the issue until there is a proposal that can be accepted
     by the CSSWG.

I'm going to warn you that solving this problem is going to take time.
But the problem you're describing makes sense to me, and right now is
a good time to be working on it, in conjunction with the related problems
we're tackling concurrently. :)

~fantasai

Received on Tuesday, 23 October 2018 13:34:23 UTC