My Kingdom for Decimal Alignment on Numbers
This post isn’t proposing any solutions (although I do toss out a hack). This post is a rant that I hope helps influence browser makers.
Much of my web work isn’t for public facing web sites. Often it’s for enterprise-level software that is deployed via the web and used in a web browser. I think any web developer who does anything beyond standard brochure-ware is ultimately in the same boat. Usually we need stylistic control over elements on the page that aren’t typically considered exciting.
Once again I find myself working on a reporting feature for a large piece of software. Reports are typically grids (a
table) made up of columns & rows with numbers, letters, icons, colors and so on. Clients are used to seeing these reports the same way they might see them in Excel, Crystal Reports, and similar tools.
These reports are formatted for quick visual scans to identify outliers and exceptions, so control over formatting is key to their effectiveness.
Often these grids contain numbers of various lengths that include decimals. Often these decimal values aren’t the same number of (significant) digits. Let me offer an example of wildly divergent numbers (I cannot show real client data):
|Isaac||6.67384||(× 10-11) m3 kg-1 s-2|
|Sergei||289.8001||billions of dollars|
It’s standard practice to align numbers to the right. The problem is that some numbers have decimals lengths that don’t match other numbers, thereby throwing off the formatting and making the entire column harder to read than necessary. Note that the biggest number is the same length as the smallest number.
CSS to the Rescue
CSS3 has a solution. The property
text-align has an option to solve our problem. It can accept a one character string as the character on which to align the text.
Not just a decimal, but a string. This is great news for languages that use a comma instead of a period for decimals. It’s great news for very large or very small values where perhaps you want to align on the multiplication sign instead.
This style will allow me to align on the decimals in my example table:
text-align: "." right; (the keyword after the string still keeps my numbers aligned to the right, after the decimal is factored in)
Now the question comes down to browser support. What browsers support it? None.
To achieve the effect I want, I would have to split my numbers into two columns, one for the whole number and one for the decimal value. Like in this hack:
|Isaac||6||.67384||(× 10-11) m3 kg-1 s-2|
|Sergei||289||.8001||billions of dollars|
This table isn’t ideal. I have to clear out padding values, remove borders, and accept that my numbers are split. It is unnecessary work that could be avoided if the browser makers would just fully support an aspect of CSS3 that has been around for years and whose related styles already have seen support for even more years across prior CSS versions.
The extra styles, whether inline or with per-cell classes, also add to the overall page weight. HTML
tables aren’t exactly examples of slim mark-up to begin with, but this can bloat them even more.
This table is also an accessibility gotcha. Users with screen readers are used to a particular way tabular data is read, so this variation may not come across so clearly. Users who scale text may see odd baseline text alignment as text wrapping in other columns can throw off everything else.
It is likely that others who have needed to represent data with alignment on specific characters have just used images instead. That solution is far worse than even this hack, particularly from an accessibility perspective.
My Request to You
If you work for a browser maker, please bring this to someone’s attention.
If you don’t work for a browser maker, please share this (or your own examples) so that perhaps the browser makers will see there is a need, even if it’s not as sexy as animations, transitions, WebGL, and so on.
Even in the modern international web, the specification is sometimes too Anglo-centric, as in the case of the
input type="number", which isn’t as universal as hoped. You can read about the request to allow developers to set a
pattern attribute on
input type="number" to specify the thousand separator, decimal separator, decimal precision and if any special characters should be allowed.
There are also people calling for Mozilla to drop support for MathML, suggesting that people who don’t use numbers in financial and scientific applications on a daily basis may not see the value in stronger support for number formatting.
Update: 16 August 2022
Eric Meyer has found a much more elegant and less problematic solution to the character alignment issue in his post Table Column Alignment with Variable Transforms.
It relies on three things in particular:
translateXto slide cells left and right,
chunits to control how far they slide, and
tabular-numsto ensure each number is the same width.
Unlike other efforts, which rely on splitting values across columns (mine above, ugh) or messing with CSS display properties (which kills table semantics still), this one does not blow up the table properties. See an example in a table for atmospheric data.
Thanks for the rant.
The problem isn’t the browser makers. The problem is an “anti-table” contingent in W3C which defines HTML.
The solution is to set the alignment for a column in the “col” tag. This feature was available in HTML 4, but W3C deprecated this feature in HTML5.
Decimal align has to take place at the column level, not the cell level, because the length of the alignment is based on the longest decimal in the column.
W3C doesn’t like people using tables for the primary page layout for a site. But they keep forgetting that tables are needed by people who are displaying data.
People who are displaying data need to align an entire column. By removing the ability to align a column, W3C made life harder for people who are making proper use of tables.
I believe it was deprecated by W3C because no browser showed any interest in supporting it. Leaving it in the spec just made it a lie to developers. It is the browser makers who really need to be cajoled into supporting it.
It is 2020.25 (March of 2020 CE). Has anyone yet figured out how to decimal align columnar scientific or engineering data in html tables, with varying arbitrary number of precision? In Microsoft Excel, at least one can use “0.??” custom format directive string to achieve similar effect.
1.234 kg, 99.0 kg, and 100 kg
Each of these three measurements has precise meaning. A measurement of 100 kg should not be reported as 100.00 kg in science, engineering and surveying. Hence, there is a need to align these three quantities based on the decimal symbol without altering the original meaning.
I agree with you. And so far I am aware of no signals. The closest I have seen to it being on any radar is when Jen Simmons of Mozilla asked on Twitter for references in response to a similar request.
In your case, you have units in a separate column, but I don’t. Values like “£10.00/month” and “£100.00/year” have no natural alignment, and no use of translateX/ch/tabular-nums will help because the unit names are in proportional type. Using character alignment, I would align to the slash (“/”) so that the prices would all line up right-aligned on the one side (the decimal count is identical) and the units would all be left-aligned on the other side.
It’s true that I could put the units in another column, but that’s not the data presentation I intend, which is for the complete rate to be a single entity.