縦組で可変数の段組み

[yamahige]

念のため確認ですが…
Webでも縦組の長い文章には段組が必要なので、JLReq-dでも段組みを取り上げましょう。

縦組の長いテキストを縦スクロールの画面に、画面の縦横サイズに合わせて自動的かつ動的に表示するために次が必要です:

1. 必要なだけ段数が増える可変数の段組。ここは紙の段組とは異なります。
2. 縦組ブロックと横組ブロックとが混在できる。例えば、広告やナビゲーションに従来の横組の仕組みを使い、本文だけを縦組にできます。
3. 段をまたがってはみ出した画像などをテキストが回り込める。段の高さ(行幅)よりも大きい画像などを挿入できます。
4. 任意の個数の段抜きの見出し。前の回り込みと段抜きとは、周囲のテキストの振る舞いが異なります。

縦組のWebページ

縦組のテキストを含むWebページが増えてきました。以前は、こういったテキストが実は画像でした。旅館、和食、酒など、縦組にしたい動機に納得できます。

• 浜名湖・炭火焼うなぎ山栄
• 書画・掛け軸・古美術｜満つ美
  ただし、画面の幅を狭くすると横組に変わってしまう。
• 【公式】灯屋　迎帆楼
  ただし、画面の幅を狭くすると横組に変わってしまう。
• 縁を紡ぐ日本酒「本菱」
  画面の幅が狭いときは縦横にスクロールして読む。
• 採用情報 | 株式会社リブセンス
  ただし、画面の幅を狭くすると横組に変わってしまう。

縦組の使われ方の特徴は次の通りです:

• ページ全体は横組かつ縦スクロールで構成し、ページの一部を縦組にします。ページ全体を縦組かつ横スクロールにはしません。こういうページにはしないのです→ デジタルな縦組み日本語の要件の検討
• 縦組にするのは目次や画面幅に収まる短い段落です。ブログの記事本文など長いテキストの縦組はほとんどありません。画面を狭くすると横書きに変化するなどの工夫をしています。前のサンプルで、ブラウザーのウィンドウのサイズを変えてみてください。長いテキストも縦組にしたいハズですが、現状では技術的な課題があって段組みがうまくできないのです。

縦スクロール

縦スクロールを前提にページ全体を構成する理由は分かります。これまでのWebページがそうなっていて、様々なテクニックや広告を埋め込む仕組みが横組かつ縦スクロールを前提にしているからです。例えばCBT (Computer Based Testing)で国語の問題は縦組、物理の問題は横組だとして、受験番号の表示やナビゲーションなど共通の部品は横組になるでしょう。また、スマホの場合は横スワイプにアプリ切り替えという別の役割が割り当てられています。

縦書きでレスポンシブなブログを作った(2017)
ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実装すると横スクロールになるからだ。
https://yuheiy.hatenablog.com/entry/2017/05/08/221206

ただし、将来的には縦組かつ横スクロールのページが登場してほしいです。縦組が増えて考えが変わることを期待してます。

技術的な課題、ギャップ

メジャーなブラウザーは、日本語縦組(CSSのwriting-mode: vertical-rl)や段組み(columnn-width、column-fillなど)をサポート済みということになってますが、縦組と段組みを組み合わせると適切に表示されません。

表現の幅が広がる！CSSで縦書きレイアウトを導入してみた(2019)
レスポンシブデザインでの縦書き表示は、まだまだ課題が残りそうです。使いどころに注意したいものですね！
https://www.nomad-creator.com/blog/2019/12/css.html

レスポンシブWebデザインと長い縦書きのコンテンツ(2020)
複カラムになった時、縦書きエリアの後にあるコンテンツが縦書きエリアの途中に表示されることに気付きました。どうも縦書きエリアの高さが正しく算出されないようです。
https://www.anothersky.jp/2020/10/vertical-text-rwd.html

横組でも

実は横組でも可変数の段組みは役に立つはずです。
PCの画面は高精細になりましたが、多くはlandscapeです。横組かつ縦スクロールでは、広い画面を活かしきれていません。
プログラマーや物書きの中には、PCモニターを90度回転させてportraitにして使う人がいます。できるだけ多くのプログラム・コードやテキストを画面に表示したいからです。横組かつ可変数の段組みにすれば広い画面を活かせます。この場合、横スクロールでテキスト内を移動します。

[kidayasuo]

なるほど。確かに、縦書きでも横書きでも、画面サイズ単位の段組みは有用のように感じられます。

jlreq-dで何を書きますかね？　縦書きの場合でも、縦スクロールが有用な可能性がある、と触れる？　もう少し踏み込みますか？

[KobayashiToshi]

なるほど。確かに、縦書きでも横書きでも、画面サイズ単位の段組みは有用のように感じられます。jlreq-dで何を書きますかね？　縦書きの場合でも、縦スクロールが有用な可能性がある、と触れる？　もう少し踏み込みますか？

Webでも段組が必要であれば，jlreq-dでも何か書いた方がよいでしょう．その場合，以下の2項目にまとめたらどうですか？　そうすれば編集会議での議論がすすめやすい．山口さん，お願いできますか． 1　Webでも段組が必要であり，こんなような使用例がある． 2　Webにおける段組処理としては，（次のような処理が可能になるように）次のような処理機能が必要である．1, 2, …, n なお，應義塾大学SFC研究所から“日本語書記技術WG報告書”（2019年3月31日）が刊行されていますが，その中でFlorianが“CSS段組の新処理方法の提案”という報告を書いていますので，参考にされるとよいでしょう． https://www.aplab.jp/_files/ugd/eb8538_e921485ff03b4900aff942b28019d9f4.pdf

[yamahige]

了解です！山口が書いてみます。

…その中でFlorianが“CSS段組の新処理方法の提案”という報告を書いていますので，参考にされるとよいでしょう． https://www.aplab.jp/_files/ugd/eb8538_e921485ff03b4900aff942b28019d9f4.pdf

おお、いいですね、参考にします。
縦組と横組が混在する場合については、CSSの方にも仕様がありまして、参考にします。

https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows

7.3. Orthogonal Flows

We appreciate feedback in general, but we are particularly interested in feedback on this particularly complicated section.

When a box has a different writing-mode from its containing block ...

[yamahige]

繁體中文の縦組ページを見つけました！部分的に縦組になってます。
ページの上下真ん中あたりの「建築空間的規劃」が縦組で、これもウィンドウ幅を狭くすると横組に変化するように設定されてます。

關於仁海宮 - 中壢仁海宮:新街廟(中壢媽)-線上點燈 線上求籤 安太歲 網路點燈

[yamahige]

書いてみました

---

デジタルテキストにも段組みが有効である。特に横書き縦スクロールを基本とした画面構成で、縦書きの長い本文テキストを読むときには、本文だけを、必要なだけ段数が増える可変数の段組みにするとよい。（デジタルデバイスの画面におけるナビゲーションや広告といった手法が横書き縦スクロールを前提として設計されているので、）現時点では横書き縦スクロールを基本とする画面構成が主流なため、縦組を導入するには、この組み方が有効であろう。

縦書きでも横書きでも、デジタルテキストはスクロールして読まれるのが主流である。本文のテキストが画面からあふれるとき、スクロールの方向は行送り方向が望ましい。そこで、字詰め方向の画面の長さが短いときは行を折り返す。その一方で、行長には望ましい長さがある。その長さを超える（字詰め方向の）画面の空きを利用するには段組みにするとよい。そこで、現在は一般的には行われていないが、横書きの長いテキストを読むときにも、可変数の段組みにして横スクロールで読むことで、パソコンの横長の大きなディスプレイを活かせるであろう。

デジタルテキストの段組みは次のようなものである（優先順位の降順）

1. 必要なだけ段数が増える可変数の段組である。これは紙の段組と異なる点である。
   （今のCSSでできている。）
2. 縦書きと横書きをを混在できる。横書き縦スクロールを基本とする画面構成の中に、可変数の段組みの縦書きテキストを配置できる。
   （CSSでできない。）
3. 図を段組みの中に配置できる。配置の仕方は様々に考えられる。例えば:
   • 本文テキストの途中に配置する
   • 行送り方向の最前・最後に詰めて配置する（上詰め・下詰め、または右詰め・左詰め）
4. （文字詰め方向が）行長よりも長い図を段組みの中に配置できる。配置の仕方は様々に考えられる。例えば:
   • 図を詰めて配置し、段の幅（行の長さ）の倍の長さを占める。例えば、全体で10段の縦書きテキストの3段目と4段目をまたがって、右詰めで図を配置できる。テキストの回り込みは起きない。
   • 前の段から溢れた図を、次の段のテキストが回り込む（上の段から下に溢れた図を、下の段のテキストが回り込む、など）。
5. 段の幅を設定できる。画面のデザイナーが行長を設定できる。
   （CSSでできない、段の幅column-widthが変わる）
6. 任意の個数の段抜きの見出しを配置できる（JLReqと同様）。

---

[yamahige]

5. 段の幅を設定できる。画面のデザイナーが行長を設定できる。
   （CSSでできない、段の幅column-widthが変わる）

例えば次のような話です

言うまでもなく，当時の朝日新聞の新聞小説の行長は19字だった．漱石は，読者が目にする行長で作品を執筆した．…漱石が自身の文体を彫琢するに際して，この特注の原稿用紙がどのような影響力を持ったかについては，残念ながら検証の手立てがない．
小林龍生, 日本語書記技術論のすすめ, コンピュータソフトウェア, 2016, 33巻, 3号, p.3_66-3_71

[kidayasuo]

推しの気持ちが伝わってきますが :) それは少し弱めた方が良いのではないでしょうか。

第1文：有効な場合がある、とか有効な可能性がある、とか。
第2文：たとえば、「縦書きの縦スクロールが可能になる」と逆に言うのはどうでしょう？

リストになっている要件はもう少し詰める必要があるかもしれませんね。

次回編集会議で議論しましょう