日本語縦書きWebの現在地 2025 - フロントエンドカンファレンス東京

PC向けのWebデプロイ版は https://slides.berlysia.net/state-of-japanese-vertical-writing-2025/ に配置されています。SPが考慮されていないので崩れます。コンテナスタイルクエリに一部機能が依存しています。

- フロントエンドカンファレンス東京

- CSS Writing Modes Level 3
- pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]
- 縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
- https://github.com/tailwindlabs/tailwindcss/pull/14805
- Japanese Gap Analysis
- 横書き登場 - 日本語表記の近代, 屋名池 誠 著
- 『モンゴル文字とUnicode』 - にせねこメモ

Transcript

1. 日 本 語 縦 書 き Ｗ ｅ ｂ の 現 在 地 berlysia
2. 「Webで縦書き」って、できるんですか？ 「縦書きができる」って、どういうことですか？
3. writing-mode プ ロ パ テ ィ 取 り う る 値 horizontal-tb （ 初 期 値 ） vertical-rl vertical-lr 継 承 す る ア ニ メ ー シ ョ ン し な い writing-mode BaselineWidely available 2 0 1 7 年 3 月 か ら Baseline CSS Writing Modes Level 3 2 0 1 9 年 12 月 か ら W 3 C 勧 告 2 0 0 3 年 頃 か ら 議 論 は さ れ て い た
4. 実 際 に 使 わ れ て い る サ イ ト ｐ ｉ ｘ ｉ ｖ 小 説 様 2 0 1 5 年 6 月 に ネ イ テ ィ ブ 縦 書 き 対 応 🔗 2 0 1 5 年 、 今 年 は 縦 書 き の 年 と 言 っ て も 過 言 で は な い で し ょ う 。 Ｚ Ｅ Ｎ Ｓ ｔ ｕ ｄ ｙ （ 旧 Ｎ 予 備 校 ） ZEN Studyの縦書き 国 語 の 教 材 で が っ つ り 利 用 し て い ま す ［ Ｐ Ｒ ］ そ の ほ か 、 意 外 と い ろ ん な と こ ろ に …… ア ニ メ や ゲ ー ム の キ ャ ラ ク タ ー 紹 介 ペ ー ジ で セ リ フ 表 現 に Ｌ Ｐ の タ イ ト ル や 途 中 に 挟 ま っ て い る
5. な ん な ら こ こ に も …… ？ https://fec-tokyo.github.io/2025/
6. writing-mode プ ロ パ テ ィ 取 り う る 値 horizontal-tb （ 初 期 値 ） 行 が 上 か ら 下 に 並 ぶ 横 書 き vertical-rl 行 が 右 か ら 左 に 並 ぶ 縦 書 き vertical-lr 行 が 左 か ら 右 に 並 ぶ 縦 書 き 継 承 す る ど こ か に 書 け ば そ の 下 に 全 部 効 く ア ニ メ ー シ ョ ン し な い
7. あ り が ち な 外 観 そ の い ち メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 母 も 無 い 。 女 房 も 無 い 。 十 六 の 、 内 気 な 妹 と 二 人 暮 し だ 。
8. あ り が ち な 外 観 そ の に と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 母 も 無 い 。 女 房 も 無 い 。 十 六 の 、 内 気 な 妹 と 二 人 暮 し だ 。 こ の 妹 は 、 村 の 或 る 律 気 な 一 牧 人 を 、 近 々 、 花 婿 と し て 迎 え る 事 に な っ て い た 。 結 婚 式 も 間 近 か な の で あ る 。 メ ロ ス は 、 そ れ ゆ え 、 花 嫁 の 衣 裳 や ら 祝 宴 の 御 馳 走 や ら を 買 い に 、 は る ば る 市 に や っ て 来 た の だ 。 先 ず 、 そ の 品 々 を 買 い 集 め 、 そ れ か ら 都 の 大 路 を ぶ ら ぶ ら 歩 い た 。 メ ロ ス に は 竹 馬 の 友 が あ っ た 。 セ リ ヌ ン テ ィ ウ ス で あ る 。 今 は 此 の シ ラ ク ス の 市 で 、 石 工 を し て い る 。 そ の 友 を 、 こ れ か ら 訪 ね て み る つ も り な の だ 。 久 し く 逢 わ な か っ た の だ か ら 、 訪 ね て 行 く の が 楽 し み で あ る 。 歩 い て い る う ち に メ ロ ス は 、 ま ち の 様 子 を 怪 し く 思 っ た 。
9. 縦 書 き を 試 す と き に 覚 え て お い て ほ し い こ と writing-mode は 継 承 す る ど こ か に 書 け ば そ の 下 に 全 部 効 く 縦 書 き の ブ ロ ッ ク は 縦 を 占 め よ う と す る ブ ロ ッ ク 整 形 コ ン テ キ ス ト の 動 作 ス ク ロ ー ル が 起 き る と き は 、 ス ク ロ ー ル す る 要 素 を 縦 書 き に す る さ も な い と 文 の 頭 が 隠 れ る 動 的 ス ク ロ ー ル 位 置 調 整 と か し な い こ と
10. text-orientation プ ロ パ テ ィ 取 り う る 値 mixed （ 初 期 値 ） 縦 書 き CSS で あ そ ぼ う upright 縦 書 き C S S で あ そ ぼ う sideways 縦書きCSSであそぼう text-combine-upright プ ロ パ テ ィ 取 り う る 値 none （ 初 期 値 ） 123 12345 all 123 12345
11. こ こ 10 年 で よ く な っ た こ と
13. 論 理 プ ロ パ テ ィ が ど う 嬉 し い か Logical properties BaselineWidely available 縦 横 切 り 替 え の あ る UI を 共 通 化 で き る ltr/rtl 切 り 替 え に も 使 え る よ り meaningful な 記 述 が で き る 上 下 左 右 が 重 要 な ら width/height た と え ば 「 影 が 落 ち る 方 向 」 は 画 面 上 で 一 貫 し て い る 必 要 が あ る だ ろ う 書 字 方 向 が 重 要 な ら inline/block グ ラ デ ー シ ョ ン 周 り な ど 未 対 応 部 分 も あ る が 、 徐 々 に 広 が っ て い る
14. 論 理 プ ロ パ テ ィ が ど う 嬉 し い か 横書き 物理：left/right 物理：top/bottom 論理：inline 論理：block 縦 書 き 物 理 ： left/right 物 理 ： top/bottom 論 理 ： inline 論 理 ： block
15. フ ォ ー ム 対 応 Vertical form controls Baseline2024 NEWLY AVAILABLE 名 前 ： こ ん に ち は 選 択 肢 １ 選 択 肢 １ 選 択 肢 ２ 選 択 肢 ３ フ ァ イ ル を 選 択 選 択 さ れ て い ま せ ん
16. 仕 様 レ ベ ル で 解 消 し て い な い 問 題 フォントをロードするまで文字の縦横を確定させられない 縦書きHTMLにおける文字の向きはどのように定まるか
17. エ コ シ ス テ ム の 課 題 marginX の よ う な 物 理 方 向 の 実 装 に margin-inline を 使 わ れ る 事 例 Chakra UI (X 方 向 の み ) Tailwind CSS v4 Panda CSS Tailwind CSS v4 は 意 図 的 に 誤 用 「 生 成 さ れ る CSS の 量 が 大 幅 に 減 る 」 「 こ の 変 更 で 影 響 を 受 け る 現 実 的 な プ ロ ジ ェ ク ト は 存 在 し な い と 考 え ら れ る 」 直 撃 し た 😇
18. 「 日 本 語 」 を 扱 う 上 で ま だ で き な い こ と ある要件が満たされているか、 満たされていない場合どれくらい影響が大きいかを示す凡例 Japanese Gap Analysis
19. 「 Web で 縦 書 き が で き る 」 どこをにらむか
20. デ ジ タ ル デ バ イ ス の 上 の 縦 書 き 縦書きと横書きのスクロール方向の違い 「縦書きならば横スクロール」なのだろうか？
21. デ ジ タ ル デ バ イ ス の 上 の 縦 書 き たとえば、縦書きのマルチカラムならば 縦スクロールの縦書きが可能となる
22. JLReq-d 作成が進む「日本語デジタルテキスト組版の要件」
23. ブ ラ ウ ザ ベ ン ダ ー の 関 心 は 得 ら れ る か ？
24. 縦 書 き へ の 追 い 風 （画像はカット） モンゴル文字 / 左から右に行が進む縦書き
25. 日 本 語 の 縦 書 き の 立 ち 位 置 横書き登場 - 日本語表記の近代, 屋名池 誠 著 🔗
26. 日 本 語 の 縦 書 き の 立 ち 位 置 右 横 書 き 西 洋 に 憧 れ て 、 そ の 風 合 い を 取 り 入 れ る 流 れ か ら 左 横 書 き 西 洋 の 文 字 と 一 緒 に 記 述 す る こ と か ら 発 展 し た 。 ど ち ら も 幕 末 〜 明 治 期 に 生 じ た 「 左 横 書 き が メ イ ン 、 縦 書 き を 併 用 」 い ろ い ろ あ っ た う え で 、 戦 後 に よ う や く 到 達
27. 「Webで縦書き」って、できるんですか？ ……多少できるが、まだ足りない
28. な ぜ 私 が Web 上 の 縦 書 き に こ だ わ る か 縦 書 き は 多 少 で き る が 、 ま だ 足 り な い 動 い て い る 人 が い る 、 流 れ が き て い る 縦 書 き が あ る と 、 表 現 の 幅 が 広 が る 縦 書 き で 遊 ん で み て く だ さ い
29. よ く し た い