CSS text-box

Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say:

Now you can declare which font metric you want the browser to consider the edge of the text box when calculating layout

Jason Bradberry has a wonderfully deep article and showcases one of the big use cases (non jacked up button centering).

Like Robin Rendle says:

I’m always fighting the text-box when it comes to buttons in an interface and so hopefully this property fixes all that.

Adam Argyle says:

This line of code is about to be in every single stylesheet.

h1, p, button {
  text-box: trim-both cap alphabetic;
}Code language: CSS (css)

Wanna learn CSS from a course?

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.