CSS ``text-align: <string>`` value

Problem

Tables often contain data that needs to line up with the rest of its column in a specific way, like currency, decimals, or equations. Web developers have wanted the ability to do this for decades, but no native method exists. As a result, web developers have come up with a variety of hacks to do so.

tables-wish-list-column-align-bad

One common way is to separate the numbers on each side of the decimal into separate columns with a spanned column header; the columns are then styled to appear as if they are one column. This method is a hassle to develop and maintain. Screen reader users will also likely have a confusing time, as they’d need to navigate to two cells to get what should be one cell’s worth of data.

Another is to use CSS Transforms to shift column text left or right so that their decimals line up. This also is an effort to set up and maintain, as each cell needs to have a class or styles manually added based on what it contains. Eric Meyer has a nice write-up of this solution.

Developers also turn to JavaScript table libraries like Tabulator for what should be an easy thing to control.

Solution

There’s actually a proposed CSS solution that exists for this. However, it’s not been implemented or even prototyped.

In section 7.2. Character-based Alignment in a Table Column in the CSS Text Module Level 4 draft specification, it details using a string as a value to the text-align property to align table cells. An optional keyword value can also be used to specify a secondary method of alignment.

So aligning a column via a decimal would be as simple as this:

td { text-align: "." right; }

tables-wish-list-column-align-good

No hacks, no messy markup, no JS.

Specification

https://drafts.csswg.org/css-text-4/#character-alignment

Additional Signals

No response

web-platform-tests / interop