created_at
updated_at
tags
toc

Markdown の Table 記法を CSS で実現する

Intro

本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に content: '##' を指定するといった具合だ。

しかし、これまで <table> だけはうまく Markdown 記法を再現する CSS が書けないでいた。

そこで、周りの CSS 強者に実現できないか聞いてみたところ、@shqld, @araya, @yoshiko 達の協力を得て、かなりの完成度にすることができた。実現方法を記録する。

Before

実現したいのは以下のような記法だ。 

| file type | size | ratio |
|:----------|-----:|------:|
| .webp     | 9474 |  100% |
| .webp.gz  | 2609 |   28% |
| .webp.br  | 2544 |   27% |

特に <thead>, <tbody> の間に入るセパレータ (|:---|---:|---:|) の部分の長さを内容に合わせるためには <td> 内の文字数を CSS 内で取得する必要がある。これは JS 無しには難しそうだった。JS は使いたくないし、もし使うしかないなら Houdini の Paint API などで実装したい。しかし、Paint API も当時は Text Rendering がサポートされてなかったため、それも諦めていた。

などと考えている間に飽きて、適当に border を dash にしただけのお粗末な実装で誤魔化していた。

border を dash にしただけの実装

Call for Implementation

Markdown のパーサを書きなおした 際にこの作業を思い出し、誰か実現できる人がいたりしないか CSS に強そうなエンジニア何人かに聞いてみたところ、いくつかアドバイスをもらえたり、PoC を返してもらえた。URL のあるものだけ貼っておく。

これらを参考にさせてもらうことで、かなりの完成度まで実現することができた。

実装方針

HTML

まず、自作のパーサでは以下のような HTML が生成される。Align は HTML の align 要素が Deprecated だったため、class で実装している。 

<table>
  <thead>
    <tr>
      <th class=align-left>file type</th>
      <th class=align-right>size</th>
      <th class=align-right>ratio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=align-left>.webp</td>
      <td class=align-right>9474</td>
      <td class=align-right>100%</td>
    </tr>
    <tr>
      <td class=align-left>.webp.gz</td>
      <td class=align-right>2609</td>
      <td class=align-right>28%</td>
    </tr>
    <tr>
      <td class=align-left>.webp.br</td>
      <td class=align-right>2544</td>
      <td class=align-right>27%</td>
    </tr>
  </tbody>
</table>

CSS

| は <th>, <td> の ::before / ::after の content でだいたい想像通りの実装を行う。

問題は <thead> / <tbody> の間の線だ。ここの実装は以下のように行っている。

  • th の ::after に ----------- を長めに用意し、overflow hidden で切る
  • align が left なら :-------- にする
  • align が right なら direction を RTL にし ----------: にする
  • top と translateY で縦位置調整

これで見た目が以下のようになる。

Markdown Like の実装

スタイル自体はこれで完成だ。

Generated Content Model

デザインとしてのスタイル指定で、content に装飾用の文字を大量に指定した。本来はスタイルとして認識され、特に Crawler や Assistive Technology には無視されることが望ましい。

しかし、CSS Generated Content Module Level 3 の仕様では、以下のように定義されている。

Generated content should be searchable, selectable, and available to assistive technologies.

The 'content' property applies to speech and generated content must be rendered for speech output. [CSS3-SPEECH]

直後に ISSUE があるため、ここにはまだ議論と作業があるが、現状 CSS の Pseudo-elements に指定された content も Generated Content であるため、大量の - などがコンテンツとして認識される状況は望ましいものではない。

実際に Mac の Voice Over で検証したところ、確かに :---- の部分が「ハイフン N 個」のように、スタイル部分をコンテンツとして認識している。

Alternative Text

そこで、1.2. Alternative Text for Accessibility に定義されているように Alternative Text を以下の用に指定した。 

th::before,
td::before {
  content: "|" / ""; /* 読み上げ等に対しては空文字として認識させる */
  float: left;
}

これで Chrome などのブラウザでは、Voice Over での読み上げにスタイル部分が無視されるようになった。

Fallback

しかし、Safari や Firefox は content の Alternative Text に対応してないため、このままでは content そのものが無視される。

通常、フォールバックとして Alternative Text 無しのものを先に指定することで見た目上は回避できる。 

th::before,
td::before {
  content: "|"; /* Safari 用のフォールバック */
  content: "|" / ""; /* 読み上げ等に対しては空文字として認識させる */
  float: left;
}

しかし、これでは Safari/Firefox を Voice Over で読み上げるような場合に、content 部分が認識される。もし先頭に 1 文字つく程度ならまだ許容できるかもしれないが、今回は文字が多いため、煩わしさは他の記法とも異なるだろう。

せっかく表としてマークアップしているのに、スタイルのために読みにくい状況になるのは不本意なため、Fallback の指定は辞め、Alternative Text 未対応のブラウザには Table の Markdown Style を適用するのをやめることにした。

Support query

Markdown Style を Table に提供しない場合は、| や - がなくなって罫線の無い Table になることを避けるため、以前自分が実装した border での実装をベースに提供することにした。

そして、@supports を用いて、以下のように Alternative Text に対応している場合のみ、Markdown Style CSS を適用している。 

/** default implementation */

@supports (content: "a" / "b") {
  /** Markdown Style **/
}

figure / figcaption

<table> 自体が横に長い場合があるため、overflow を指定する必要がある。しかし、overflow を指定するためだけの親要素として <div> を追加するのがなんとなく気に食わなかったため、以前から TODO だった表のキャプションを導入することにした。

<table> の場合は <caption> を使うのが一般的ではあるが、より汎用的な仕様である <figure> と <figcaption> を用いることも仕様上可能だ(ただし両方の併用は不可)。そこで、<table> 全体を <figure> で囲み、そこに overflow を指定しつつ、<figcaption> を入れれば、全てが一度に解決するためこの方法を取ることにした。

Caption 記法

パーサとジェネレータは自作しているため、<figure> で囲むのは簡単だが、問題は <figcaption> の内容を Markdown 上どう表現するかだ。

Markdown は Caption の記法を標準で持たないため、様々な実装が独自の拡張として実装している。[caption] のように括弧で囲うタイプのものが多いが、[] に独自の意味を持つ実装は割と多いため、未対応の場合は単なる <p> として扱われるよう、Caption: caption という記法で Table の直前に置くことにした。 

Caption: Webp を gz/br 圧縮した結果
| file type | size | ratio |
|:----------|-----:|------:|
| .webp     | 9474 |  100% |
| .webp.gz  | 2609 |   28% |
| .webp.br  | 2544 |   27% |

せっかくなので、論文のようにキャプションの前に "表 1:" のようなプレフィックスを CSS Counter を用いて付与し、以下のように表示するようにした。

figcaption を付与した table

After

以上を踏まえて実装した表が以下だ。Chrome などでは Markdown Style で表示され、Safari / Firefox などでは従来の border style で表示される。

Webp を gz/br 圧縮した結果
file type size ratio
.webp 9474 100%
.webp.gz 2609 28%
.webp.br 2544 27%

TODO

今回は text-overflow を clip にしているため、長さによっては横線の - が途中で切れる場合がある。

対策として text-overflow に "-" や ":" などを指定できると終端を綺麗に処理できそうだが、Firefox しかサポートしておらず、Firefox は上述の Alternative Text に対応してないため実現できなかった。

text-overflow と Alternative Text の compat が上がったら再検証したい。

DEMO

単体で動作するデモを以下に用意した。

謝辞

実装の助言をくれた 、@shqld, @araya, @yoshiko に感謝する。

Reference