縦組み

デジタルな縦組みの日本語について、気になることをいくつか。2022年10月24日のセミナーでした質問の例を示す。

なお、HTMLやCSSの仕様を使った縦組みの実現方法やブラウザの実装状況は、Styling vertical Chinese, Japanese, Korean and Mongolian textに整理されている。

次のページはどこに？

縦組み日本語のデジタルテキストでは、次のページはどこにあるのか？次ページのリンクや外部リンクが指すページはどこにあるのか？外部リンクであることをアイコンで示すことがあるが、このアイコンは右上を指すのか、右下か？縦組み2段組の例にならえば右下ではないか。

日本語組版処理の要件（日本語版）は，CSS，SVGおよびXSL-FOなどの技術で実現が求められる一般的な日本語組版の要件を記述したものです．この文書は，主としてJIS X 4051（日本語組版規則）に基づいていますが，一部，JIS X 4051に記載されていない事項にも言及しています．この版では，誤りの訂正や関連情報へのリンク追加などが行われています．

外部リンク先の場所を示すアイコン。アイコンには文字(記号)が使われており、CSSのcontentプロパティで生成されている。

紙の場合、横組みでは、次のページの先頭は右にある。2段組の場合も次の段の先頭は右側にある。横組みでは、次ページと次段のある方向が合っている。右綴じの縦組み日本語の本では、次のページの先頭は左側にあり、2段組なら次の段の先頭は右下にある。縦組みの日本語の場合、次ページと次段のある方向が合わない。ちなみに、「縦組みの日本語は上綴じ(天綴じ)」だったら次ページの先頭は右下となり、方向が合う。

紙の横組の場合、次のページの先頭(先)と次の段の先頭(後)の位置・方向。同じ方向にある。

紙の縦組みの場合、次のページの先頭(先)と次の段の先頭(後)の位置・方向。別の方向にある。

縦組みと横組みで「次のページの場所」を示す矢印の方向を変えることは1ソースで実現できる。この文書で外部リンクを示す矢印は文字「↗」で、かつCSSのcontentプロパティによって自動生成している。現在(2022-10-28)、横組みで右上を向いた矢印「↗」が、縦組みでは右下を向く。次のページの先頭が右下にあるとするなら、それに応じた矢印の向きは1ソースで実現されている。この矢印記号のふるまいは誤りかもしれない。その場合でも、矢印はCSSで実現されているので、CSSを切り替えるれば1ソースで実現できることに変わりはない。

フォーム内の要素

フォームコントロールのような置換要素、ボタン要素(button)、入力欄要素(input)、HTML選択要素(select)、テキストエリア要素(textarea)は、縦組みに対応するのは難しいのだろうか？そろそろ縦組みに対応してほしい。

テキスト入力欄(input type="text")やテキストエリア(textarea)のテキストは縦組みにできてほしい。入力欄なので、ルビや縦中横などは不要ではないか。こういった不要な機能を明示すれば実現は早まるか？

縦組みが実現したとき、大きさを変更できる(CSSのresizeプロパティがnoneでない)テキストエリアのサイズをドラッグで変えるためのハンドルは左下に付くのではないか。

見出しを組版処理の方法で分けて、4つの種類を上げなさい。

見出しを配置する領域と位置を説明した次の文章の空欄に該当する用語を入力せよ。

見出しを配置する領域ののサイズは，基本版面で設定した行の位置を元に，それの何行分を用いるかという方法で設計する（この処理方法については，JIS X 4051の8.3.3のd）に規定されている）．見出しののは，基本版面で設定した文字位置を基準に，その何字分を下げるかという方法で一般に設計する．

日本語文書の基本となる組体裁の主な設計要素を、4つあげて説明せよ。

テキスト入力欄の例

ボタンのテキストは縦組みにできてほしい。

ボタン要素

ファイル選択のコントロール(input type="file")の「ファイルを選択」というテキスト、ラベル(label)、選択したファイル名は縦組みにできてほしい。

夏休みの課題をZIPにまとめてアップロードしなさい。

課題ファイル(.zip):

ファイル選択

チェックボックスのテキストは縦組みにできてほしい。チェックボックスのチェック欄(○)とラベル(label)は揃ってほしい。

表の処理にあたって、日本語組版特有の問題を記述するために必要となる概念をすべてチェックせよ。

キャプション縦中横横罫こま行列

チェックボックス

検索文字列のテキスト欄は縦組みにできてほしい。

検索文字列

選択要素の中の選択肢(option)も縦組みにできてほしい。かつ、右から左に展開してほしい。

次の説明が該当する用語を選べ。

「欧文フォントなどにおいて，フォント中の多くのグリフがその上でそろう，基本的な仮想の線．」

選択要素

展開・折りたたみ方向

縦組みの場合、select要素やJavaScript/CSSで作ったボックスが展開・折りたたみする方向は、展開は右から左、折りたたみは左から右ではないか。いずれの場合も、展開/折りたたみのトリガーを与える要素(図では「▶ この文書の目的」)の位置は、なるべく動かない方がよい。展開するときは、トリガー要素の左側にあった文章が左方向に移動する。トリガー要素が右に動くのではない。

この文書の目的

すべての文化集団は，独自の言語，文字，書記システムを持つ．それゆえ，個々の書記システムをサイバースペースに移転することは，文化的資産の継承という意味で，情報通信技術にとって非常に重要な責務といえよう．

この責務を実現するための基礎的な作業として，この文書では，日本語という書記システムにおける組版上の問題点をまとめた．具体的な解決策を提示することではなく，要望事項の説明をすることにした．それは，実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからである．

展開・折りたたみ方向。「この文書の目的」や頭の「▶」をクリックすると展開したり折りたたんだりする。
JavaScriptを使わず、details要素で実現するように修正。(2022-10-29)

図のキャプションの配置

図のキャプションを図の左右に縦組みに配置する例も、明示的してよいのではないか。JLReqは「キャプションは，一般に図版の下側に配置する」とし、縦組みの場合でも図版のキャプションは横組にする場合も多いとしている。CSSにブロックとインラインという概念が導入され実装されている。キャプションを図の左右に縦組みに配置すると、図の下に横組で配置するよりもCSSがシンプルになる。

キャプションの幅(inline-size)も悩ましい。「テキスト入力欄の例」図のキャプションを参照。全体が縦組みで、横幅に制限がない巻物の場合、図のキャプションを単に横組みにして横幅(inline-sizeやmax-inline-size)を設定しないと、いくらでも横に長くなってしまう。すべてのキャプションの横幅を一律に設定するならCSSで実現できる。図の幅に応じてキャプションの幅(inline-size)を個別に設定しようとすると、縦組み用と横組み用に異なる設定が必要になってしまい、1ソースにならないのではないか。

キャプションの揃えも悩ましい。縦組みで横幅に制限のない巻物のとき、横に長い図を表示できる。このとき、短いキャプションが中央揃えだと、見つけづらくないか？「テキスト入力欄の例」図のキャプションを参照。

(引用)
この文書は，CSS，SVGおよびXSL-FOなどの技術で実現が求められる一般的な日本語組版の要件を記述したものです．この文書は，主としてJIS X 4051（日本語組版規則）に基づいていますが，一部，JIS X 4051に記載されていない事項にも言及しています．この版では，誤りの訂正や関連情報へのリンク追加などが行われています．
Copyright ©2020 W3C^® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.

— 日本語組版処理の要件（日本語版）

縦組みのときにキャプションが縦組みで図の左側に配置される例、その2。blockquote要素を使った引用の例。

縦組みのときに、縦組みのキャプションが図の左側に配置される例、その3。大きな図が展開したり折りたたんだりする場合。大きな図が展開したり折りたたんだりするとき、そこが文末かどうかなどによって、キャプションが移動したり、しなかったりする。

縦組みのときに、縦組みのキャプションが図の右側に配置される例。全体が横組みのときは、図の上に配置されている。大きな図が展開したり折りたたんだりするとき、そこが文末かどうかなどによって、キャプションが移動したり、しなかったりする。

生成されたテキストの向き

CSSのcontentプロパティで生成されたテキストの縦中横など、文字の向きが悩ましい。この文書では図番号や箇条書きのマーカーが該当する。

CSSのtext-combine-uprightプロパティと、そのall値とはずいぶん前に実装されたが、digits値は長く実装されていない。この状況を受け入れて、必要な部分をspan要素でくくりだして特定のclassを設定し、そのclassに対してCSSでtext-combine-upright: all;と指定する方法で行ける気もする。しかし、この方法でも、自動生成するテキストの縦中横が悩ましい。対策としては:

数字とそれ以外("図"など)を別々に生成する。この文書はこの方法を使っている。ただし、これを単純に適用するだけだと、数が3桁になったときに苦しい…3桁の図番号はあまり見かけないが。
数字だけを回転するのではなく、数字前後の文字も回転する。"図23"の"図"は英数字に準じると考えて、英数字と同じ向きとする。縦組み文書でも、"図23"全体の文字の向きを「横書きで書いて 90° 回転したように」配置する。すなわち、縦組みのキャプション中でも"図23"、それを参照する本文中でも"図23"。これはwriting-mode: sideways-rl;に相当する。
縦書きは自動生成と馴染まないと諦める。例えば、自動生成したテキストを抽出してテキスト要素として、縦中横する/しないに合わせて加工して、その結果をソースとする。

このキャプションは、縦組みになっても、図番号が「横書きで書いて 90° 回転したように」配置される。