この文書はJLreq-d編集会議2026-05-13において議論になった行間固定を実現するためのCSSを考えるためのサンプルとして提示する。 文書全体のフォントサイズは20pxを採用し、既定の行間は1.6倍としている。 また、背景画像は最上部ピクセルが橙色、そこから20pxのところに水色のペアを、橙色ライン同士が32px間隔で配置されるようになっている。
長文のテキストはJLreq-dのレポジトリ内から抽出してきているランダムテキストである。
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
行間固定サンプル
ちょうど手書きによる書写と印刷のように、また馬車と自動車のように、印刷とWebに代表されるデジタルテキストでは、 目的を同じとしながら技術的な成り立ちが根底から異なっている。一つの根本的な違いは誰が組版を決定するかにある。 印刷においては送り手がしばしばプロによる校正ののち組版を決定し、固定された単一のイメージを受け手に対し配布する。 デジタルテキストにおいては受け手が最終的な組版を決定する。送り手により送信されたデータに基づいて受け手の元で デバイスの特性や好みに従って無数の異なるイメージが生成される。*もう一つの大きな違いは、装丁法だ。 印刷において文書は通常固定寸法のページに分割され、まとめられて冊子となる。冊子はそれ以前に用いられていた巻物に比べて、 収蔵、一覧、ページ番号による参照やランダムアクセスなど、革命的な利点を持っていた。デジタルにおいて冊子形態の持つ これらの利点は消える。デジタルテキストは典型的に文書は巻物の形に装丁される。*これらの違いが印刷と本質的に異なる制約条件と可能性を生み出す。

htmlでは表示の全体を示すbodyに既定で外側のアキとなるmarginが設定されている。 しかしながら、隣り合う要素のmarginはCSSでは相殺され隣り合う二つの間の大きい値のみが採用されることになるため、 bodyの直下にdivを配置する場合、行送り方向のスペーシングはbodyかdivのどちらか大きい値に設定されてしまう。
このサンプルではこのmargin総裁問題を回避するため、基本的にmarginは0pxに設定し、paddingにより行送り方向の位置を制御する。

ヘッディングについて、h1からh6までの6段階について、1.25倍（程度）ずつ大きくなるフォントサイズを設定する。 本文は20pxであるため、直近の整数値を採用する方針で、h6を25px、h5を31px、h4を39px、h3を49px、h2を61px、h1を76pxとした。
h6までのすべてを固定のタイプスケールとしたのは単純にサンプルのためである。

CSSではヘッディング要素の表示について、フォントサイズによる高さに加え、line-heightの設定による行の高さを考慮しテキスト領域を決定し、 その上下にmarginを適用することになる。
後述する長い文章が入ったヘッディング要素で行の折り返しが入った場合には、line-heightによる行間が適用される。 このため、 1) line-heightを本文のline-heightの整数倍に設定することでヘッディング要素の行の高さを本文の行の高さの整数倍にし、 かつmarginを0pxにしpaddingを設定する、 もしくは、 2) padding-top, padding-bottomをヘッディング要素の中身の高さをとる100%の値を利用して計算することで、 ヘッディング要素と周囲を合わせた高さを本文の行の高さの整数倍に合わせる、 などの対応が必要であるが、ここでは1)の計算を行っている。
つまり、それぞれのline-heightについて、1.6倍に近い値を選択することで、h6は32px、h5は64px、h4は64px、h3は96px、h2は96px、h1は128pxとする。 また、marginは0px、paddingを上下とも16pxに設定した。
なお、ブラウザによっては、表示上、このdivブロックのテキストの一部に含まれる非和文文字の影響で、1px程度の行間の乱れが発生することがある。 具体的には半角とじ括弧の下伸び？

このため、印刷のためではない、デジタルネイティブな組版について記述した文書を開発することは有用であると考える。 デジタルテキストにフォーカスした要件文章を JLReq の先にあるものとして開発することの合意が JLReq TF で行われた（2021/10）。 とりあえずの略称を JLreq-d とする。

デジタルデバイス上の組版は進化しつつある技術なので、はっきりとした答えがなかったり、未だ答えのない問題もあるだろう。 それでも、現在までの経験や考察によりわかっていること、また明らかになった課題などを、一旦ここでまとめておくことに意味があると考える。 また、現状に追い越されないように、一旦の完成後も将来のチームによって継続的なアップデートが必要になろう。

画像を入れようとする場合、画像要素の縦の長さに合わせて下に入れるpaddingのサイズを設定してやることで行間を固定できると思われる。
上の張り込みは背景に入れている160px正方形の画像を250pxの高さにし90度回転させている。
既定のブラウザCSSでは画像の周囲はmarginとpaddingとも0pxであり、 画像をmarginとpaddingともに0pxにしたdivで囲み、imgのmargin-bottomにcalc(1em * 1.6 - mod(100%, calc(1em * 1.6)))を設定することにより、 下部paddingを含めた高さを行間隔の整数倍にしている。

新しいドキュメントを作るもう一つのモティベーションは、開発支援である。JLreq は高品質な日本語組版を英語で記述した初めてのドキュメントであり、 大きなインパクトをソフトウェア開発にもたらした。しかし、JLreq を読み下してソフトウェアに落とし込もうとすると、いくつかの障害に突き当たる。

このため、ソフトウェアを開発しようとすると複雑な解釈が必要となり、日本語のエキスパートに相談したり、終わらない議論に巻き込まれたり、 単に想像で実装を行ったりすることになる。それによって開発費が増大したり、開発が遅れたり、場合によっては実装を断念する結果になってしまう場合もある。 この問題を解決することで、より早期に、より多くの、またよりベンダ間で統一の取れた実装が得られることを期待する。

三つ目のモティベーションはアクセシビリティである。アクセシビリティは通常のソフトウェアやコンテントにとってもますます重要になりつつある。 デジタルテキストの一つの特質は、ユーザーの必要や好みに応じて柔軟に最終イメージを作ることができることである。 JLreq-d はアクセシビリティを誰もが理解しているべき通常のこととして扱う。ソフトウェアやコンテントをよりアクセシブルにするために考慮すべき点などを示すことで、 より多くの人にとって使いやすい環境が達成されることを期待する。

モティベーションの項で述べたように、デジタルテキストの組版は従来の印刷と異なる制約と可能性を持っている。 それらを要件に反映するのがJLReq-dの目的であるから、印刷組版の詳細な再現が重要な応用は対象外となる。 そのような応用に対してはJLReqが対応する。
例えば下記のような応用は対象外となる：

ここまではすべて本文はdivエレメントで挿入していたが、これ以降は様々な組み合わせを試すために、div以外のエレメントを利用してのサンプル文章により記述する。