表のセルでは数字は右揃えにすることが多い。しかし少数を右揃えにすると、小数点以下の桁数が違う時に読みづらくなる。等幅フォントにしてもそれは解決しない。少数点がうまく縦に並ぶように揃えたいわけだ。CSSではtext-alignプロパティーで文字列が指定できるようにしたいようで、いずれ可能になるかもしれない。とされているが、実はHTML4.01の頃からほぼ同じ機能は仕様で定義されているものの実装はないので、期待は薄い……と思ったものの、うっかり実装されていないかどうか確認した。
Demo: Test Page for Decimal Alignment in Table Cell
やはりというか<td align="char" char=".">の実装はなかった。ついでにtext-align: "."もテストしてみたが、こちらもまだ実装はない模様だ。テスト・ページでは省いたが、ベンダー拡張プリフィックスでの実装ということもなかった。
この小数点での行揃えは前に@ub_pnrと「欲しいね」とか言ってたような記憶がある。それ以外にもどうにかしてそうして欲しいというようなことはよく言われる。じゃあどうするかというと、大体は表で欲しがられ、その表は何かしらのデータから生成されるので、データ側をいじって誤魔化している。
- データをいじり、小数点以下の最大桁に足りない分半角スペースを追加する
- セルのスタイルで以下の3つを指定する
font-family: monospacetext-align: rightwhite-space: pre
これでなんとか揃う。
今時だと等幅フォントに変える代わりにfont-feature-settingsプロパティーでtnum "1"するのも良い。このウェブサイトではずいぶん前から試しに設定してみており、稀に効果を発揮していた(今は発揮していない)。もちろん対応フォントを上流で使っている必要はあるが、違うフォントを使わずに専用の等幅数字を使えるので、より読みやすい結果となりうる。
CSS Text Module Level 4はLevel 3に入れることはできなかったものが寄せ集められている。
display: inline-blockでできる隙間を潰す、text-space-collapse: discard- 最後の一文字や句読点だけ次の行になったりしなくなる、
text-wrap: balance - 完全なる自動ハイフネーション
- 日本語の文章内の英単語の前後に空白をはさむ、
text-spacing: ideograph-alpha
などなど、人類ウェブ・デザイナーの夢が詰まっているので、可及的速やかに実装が出てくるとうれしい。