Align Decimal Data in table column by decimal point, HTML5, CSS3

Question

I am building a wordpress plugin which is generating an HTML table and sending to gravityforms html block via shortcode.

My problem is that cell contents can contain:

• 23.24
• 1,234.665
• 123.4

etc...

Notice the differing number of decimal places.

Is there a non-hack & best practice way of aligning this column data by decimal point? In this case, Aligning right will not work.

Inserting 0s is not acceptable because this indicates a degree of accuracy which is not there.

As you can see, I have attempted to use align="char" char="." inside the td elements with no luck.

Any help anybody can help with this would be much appreciated.

Many thanks.

Is there a way of using printf("%8.3f",d1) or similar without actually printing to the screen? e.g. structuring the variable d1 for later use but not actually printing it?

Answer 1

There is no direct way to do this. HTML 4.01 has align=char, but without any browser support. CSS 2.0 had a counterpart, using the text-align property, with equal lack of support, so it was dropped from CSS 2.1. CSS3 drafts have a nice system for such alignment, but indicated as being in danger of being cut from the spec if there are no (correct) implementations.

As a workaround, you could right-pad the values with something invisible (blank) so that when the values aligned to the right, the decimal markers get aligned. There are several ways to try to achieve this:

1) Use digit 0 but set a style on it, making it invisible, e.g.

123.4<span class=s>00</span>

with

.s { visibility: hidden; }

2) Use FIGURE SPACE U+2007, defined to have the same width as digits (when digits are of equal width), e.g.

123.4  

For this to work, you need to set the font so that it contains U+2007. According to http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm even Arial contains it, but I’m afraid this might not apply to old versions of Arial still in use.

3) Use a no-break space and set its width to the desired number of digits, using the ch unit (define to have the width of digit 0), though this unit is relatively new and not supported by old browsers. Example:

123.4<span class=d2>&nbsp;</span>

with

.d2 { width: 2ch; display: inline-block; }

I would probably use the first method. As a matter of principle, it has the drawback that when CSS is off, the data contains zeroes, which imply wrong information about accuracy, whereas in other methods, switching CSS off “only” messes up the layout.

(It’s probably obvious that digits must be of equal advance width, so that you can align numeric data at all. This just means that the font used for the values must have that property. Most fonts will do in this respect, but e.g. Georgia, Constantia, and Corbel won’t.)

Answer 2

I wrote a jQuery plugin that solves this. It's found here: https://github.com/ndp/align-column

Using your raw HTML table, it will align a column by decimal points:

$('table').alignColumn(3);

It does this by adding another column, but does its best to not corrupt the other spacing. There's also a reference to a different solution on the Github page.