search

seek-oss / capsize

Flipping how we define typography in CSS.
https://seek-oss.github.io/capsize/
MIT License
1.51k stars 37 forks source link

`text-box-trim` and `text-box-edge` in Canary behind a flag #205

Closed argyleink closed 2 weeks ago

argyleink commented 3 months ago 
h1 {
  text-box-trim: both;
  text-box-edge: ex alphabetic;
Screenshot 2024-06-10 at 1 35 14 PM

Would love to capture feedback from experiments you do. Spec for ref.

michaeltaranto commented 3 months ago

Thanks for sharing, i'll try and summarise some thoughts:

text-box-edge

I find this property a little unpredictable. Setting the edge to cap or ex and not using the alphabetic baseline seems counter intuitive i feel, as both metrics are measured from this point.

My opinion would be that both cap and ex set the bottom edge to alphabetic baseline by default.

Note: The image below (used in Section 5.2 / Figure 5) I think would be more valuable if it used a font that had greater difference between the cap height and the ascender. This would help to illustrate the distinct edge values.

Three different values of the text-box-edge property.

So in the future the trim that Capsize provides could be:

.text {
  text-box-edge: cap; // (assuming above feedback, means not requiring `alphabetic`)
  text-box-trim: both;
}

Let me know if you want to talk further about the above.

argyleink commented 3 months ago

great items of feedback! I've sent a summarization to the eng team as well as a link to this post. will post back here with any changes made due to the feedback, thanks! 🙏🏻