Webサイトで縦書きを使う、縦書きのWebサイトを作る / BuriKaigi 2026

https://fortee.jp/burikaigi-2026
https://fortee.jp/burikaigi-2026/proposal/62024ffd-e82b-479a-b6bf-8968564f21c8

HTML版スライド（PC推奨）
https://slides.berlysia.net/burikaigi2026-use-vertical-writing-on-a-site-or-create-a-vertical-writing-site/

Transcript

1. W e b サ イ ト で 縦 書 き を 使 う 、 縦 書 き の W e b サ イ ト を 作 る berlysia / BuriKaigi 2026
2. 縦 書 き を す る 言 語 Ｃ Ｊ Ｋ の イ メ ー ジ が 強 い だ ろ う 中 国 語 ・ 日 本 語 ・ 韓 国 語 縦 書 き の 活 用 度 合 い に は 差 が あ る 日 本 語 が 一 番 ア ク テ ィ ブ に 縦 書 き を 使 っ て い る こ れ ら の 言 語 の 面 白 い と こ ろ 急 に 縦 書 き に な っ て も 横 書 き に な っ て も 問 題 な く 読 め る
3. 日 本 語 の な か の 縦 書 き ソ フ ト ウ ェ ア の 世 界 で 生 き て い る と 横 書 き 中 心 の よ う に 感 じ る が …… 現 代 の 日 本 語 表 記 は ： 左 横 書 き を 第 一 選 択 肢 と し な が ら 、 右 縦 書 き を 必 要 に 応 じ て 併 用 し て い る 参 考 ： 屋 名 池 誠 『 横 書 き 登 場 日 本 語 表 記 の 近 代 』
4. 電 子 書 籍 と Ｗ ｅ ｂ の 縦 書 き 書 籍 は 伝 統 的 に 縦 書 き が 主 流 電 子 書 籍 で も 当 然 、 縦 書 き の 強 い 要 求 ・ 需 要 が あ る 二 〇 一 一 年 （ も う 15 年 前 ！ ） Ｅ Ｐ Ｕ Ｂ ３ の 成 立 真 の 縦 書 き 電 子 書 籍 対 応 が 叶 う Ｅ Ｐ Ｕ Ｂ ３ は Ｈ Ｔ Ｍ Ｌ と Ｃ Ｓ Ｓ が ベ ー ス Ｗ ｅ ｂ の 縦 書 き や ル ビ の 表 現 は 電 子 書 籍 の 成 立 と 密 接 に 関 連 す る 参 考 ： 小 林 龍 生 『 Ｅ Ｐ Ｕ Ｂ 戦 記 』
5. Ｗ ｅ ｂ で 縦 書 き が 使 わ れ て 10 年 が 経 つ 先 人 の 努 力 に 深 く 感 謝 し つ つ 、 今 日 は 歴 史 の 話 は し な い 実 際 に 活 用 さ れ て い る 場 面 ： 小 説 投 稿 サ イ ト ｐ ｉ ｘ ｉ ｖ 小 説 カ ク ヨ ム 教 育 系 サ ー ビ ス 例 ） Ｚ Ｅ Ｎ Ｓ ｔ ｕ ｄ ｙ 他 、 Ｌ Ｐ 、 テ ィ ザ ー サ イ ト 類 個 人 サ イ ト に も 例 が あ る
6. 「 日 本 語 が 使 え る 」 と は ど う い う こ と か 日 本 語 組 版 処 理 の 要 件 W3C Working Group Note Ｗ ｅ ｂ の 技 術 で 日 本 語 組 版 を す る の に 想 定 す べ き 要 件 ・ 慣 行 を 整 理 し た 文 書 主 に JIS X 4051 に 基 づ く そ こ に あ る 要 件 の 例 ： 禁 則 処 理 （ 行 頭 ・ 行 末 の 制 約 ） ル ビ 約 物 ・ 空 き 量 ・ 詰 め な ど こ れ ら を 満 た さ な い と 日 本 語 の 表 現 と し て 違 和 感 を 感 じ や す い
7. 「 縦 書 き が で き る 」 と は ど う い う こ と か お な じ く 、 日 本 語 組 版 処 理 の 要 件 か ら 行 方 向 が 縦 （ 縦 に 組 む ） で あ る こ と 縦 組 に お け る 文 字 の 向 き ／ 縦 組 用 字 形 の 扱 い 回 転 ・ 正 立 、 縦 用 グ リ フ な ど 縦 組 に 適 し た 禁 則 処 理 ・ 約 物 処 理 約 物 の ぶ ら 下 げ な ど こ れ ら が 扱 え て い な い と 、 日 本 語 の 縦 組 と し て 違 和 感 を 感 じ や す い
8. 関 連 す る Ｃ Ｓ Ｓ プ ロ パ テ ィ writing-mode 書 字 方 向 を 指 定 text-orientation 縦 書 き 時 の 文 字 の 向 き を 指 定 hanging-punctuation 句 読 点 の ぶ ら 下 げ text-spacing-trim , text-autospace 約 物 ・ 空 き 量 ・ 詰 め の 制 御 line-break , word-break , overflow-wrap 改 行 規 則 の 制 御 日 本 語 だ け で な く 、 Ｃ Ｊ Ｋ や そ の 他 の 言 語 も 睨 ん で 様 々 な 仕 様 が つ く ら れ た
9. 「 Ｗ ｅ ｂ サ イ ト で 縦 書 き を 使 う 」 は 確 か に 叶 っ た デ ザ イ ン の 中 に 縦 書 き を 取 り 入 れ 、 writing-mode を 使 っ て い る 場 面 は し ば し ば 見 ら れ る 縦 書 き を 活 用 す る サ ー ビ ス は す で に 存 在 し 、 欠 か せ な い 存 在 に し か し い ま 、 「 縦 書 き の Ｗ ｅ ｂ サ イ ト を 作 る 」 こ と は 、 「 Ｗ ｅ ｂ サ イ ト を 作 る 」 の 外 に あ る
10. 「 縦 書 き の Ｗ ｅ ｂ サ イ ト 」 を 作 る こ と の 課 題 直 面 す る 大 き く 三 つ の 関 心 事 ス ク ロ ー ル フ ォ ン ト デ ザ イ ン
11. ス ク ロ ー ル の 問 題 縦 書 き の テ キ ス ト は 素 朴 に は 横 ス ク ロ ー ル を 引 き 起 こ す （ し か も 左 方 向 ！ ） し か し 、 デ ジ タ ル 世 界 の 現 状 は 、 下 に 進 む の が 前 提 に な っ て い る マ ウ ス ホ イ ー ル は 上 下 の み が 一 般 的 各 Ｏ Ｓ の デ ザ イ ン ガ イ ド ラ イ ン も 、 縦 ス ク ロ ー ル を 推 奨 し て い る 縦 書 き は 単 に 想 定 し て い な い 縦 書 き テ キ ス ト の 横 ス ク ロ ー ル 閲 覧 は 周 辺 物 の 想 定 と 大 き く 乖 離 が あ る 関 連 す る 発 表 ： 縦 書 き Web の 実 用 を 支 え る JavaScript
12. フ ォ ン ト の 問 題 向 き を 伴 う 文 字 の 扱 い に 一 貫 性 を 持 つ の が 難 し い 上 向 き 矢 印 ↑ は ど う 見 え て い る ？ 三 点 リ ー ダ … は ど う か ？ 各 文 字 の 既 定 方 向 の 定 義 Unicode の UAX #50 各 フ ォ ン ト の 縦 書 き グ リ フ 収 録 状 況 実 際 の 縦 書 き グ リ フ の 内 容 各 レ ン ダ ラ ー の 実 装 こ れ ら の 要 素 が 複 雑 に 絡 み 合 っ て い る 詳 細 は 次 を 参 照 ： 縦 書 き HTML に お け る 文 字 の 向 き は ど の よ う に 定 ま る か
13. デ ザ イ ン の 問 題 「 縦 書 き の Ｗ ｅ ｂ サ イ ト 」 の 探 究 が ほ と ん ど 進 ん で い な い 既 存 の ア イ デ ア …… 横 ス ク ロ ー ル 巻 物 パ タ ー ン ス ク ロ ー ル ス ク ロ ー ル の 問 題 が 再 来 縦 書 き マ ル チ カ ラ ム パ タ ー ン 個 人 的 に 推 し 、 商 業 事 例 も あ る だ が マ ル チ カ ラ ム の 仕 様 が 発 展 途 上 他 に も あ る ？ 一 度 き り の 表 現 と サ ー ビ ス に 取 り 入 れ る こ と に は 大 き な 隔 た り が あ る
14. ペ ー ジ メ デ ィ ア と 連 続 メ デ ィ ア 電 子 書 籍 の 世 界 で 取 り 組 ま れ た の は ペ ー ジ メ デ ィ ア と し て の 日 本 語 組 版 半 固 定 の 、 区 切 り あ る レ イ ア ウ ト の 世 界 一 方 、 私 た ち が 日 々 親 し む Ｗ ｅ ｂ は 連 続 メ デ ィ ア の 形 を 取 る 流 動 的 で 可 変 の レ イ ア ウ ト の 世 界 こ の 違 い が 「 縦 書 き の Ｗ ｅ ｂ サ イ ト 」 を 作 る こ と を よ り 難 し く し て い る
15. ほ ぼ 全 て の 取 り 組 み が 「 発 明 」 を 求 め ら れ る 参 考 に で き る 先 行 事 例 が 少 な い デ ザ イ ン パ タ ー ン が 確 立 し て い な い 技 術 的 な 考 慮 事 項 も あ る 選 択 肢 に 挙 が ら な い 、 挙 が っ て も 軽 い 気 持 ち で 採 ら れ な い 、 縦 書 き を 必 須 と し た 人 が 頑 張 る だ か ら 「 縦 書 き の Ｗ ｅ ｂ サ イ ト 」 は ま だ 「 Ｗ ｅ ｂ サ イ ト 」 の 外 に あ る
16. 先 駆 者 の 不 在 に 差 す 光 縦 書 き し か で き な い 文 字 モ ン ゴ ル 文 字 復 権 の ム ー ブ メ ン ト Ｃ Ｊ Ｋ 言 語 は 縦 横 ど ち ら も で き る が モ ン ゴ ル 文 字 は 縦 書 き が 必 須 の 横 書 き に 逃 げ ら れ な い 環 境 「 縦 書 き の Ｗ ｅ ｂ サ イ ト 」 の 世 界 が 広 が る こ と を 期 待 す る
17. 「 縦 書 き の Ｗ ｅ ｂ サ イ ト を 作 る 」 縦 書 き は 日 本 語 だ け の 関 心 で は な い Ｗ ｅ ｂ は 縦 書 き を 受 け 入 れ た 縦 書 き を 普 通 に 扱 え る と い う こ と は 、 Ｗ ｅ ｂ は 書 字 方 向 を 何 ら 前 提 と し な い と い う こ と だ 「 縦 書 き の 」 と い う 修 飾 は 、 い ら な い は ず
18. 日 本 語 の 縦 横 併 用 を 想 う 日 本 語 で は 、 縦 書 き と 横 書 き を 併 用 す る こ と が 当 た り 前 に 行 わ れ て い る 縦 書 き と そ の 周 辺 の 対 応 が 進 む こ と は 、 日 本 語 で 当 た り 前 に 行 わ れ る 表 現 が 、 Ｗ ｅ ｂ で も で き る よ う に 広 が る こ と Ｃ Ｓ Ｓ の 能 力 を 向 上 し て い く こ と で 、 「 縦 書 き の Ｗ ｅ ｂ サ イ ト を 作 る 」 へ の 道 が 開 け て い く だ ろ う そ の 未 来 の 日 本 語 デ ジ タ ル 文 書 も ま た 縦 書 き を 特 別 視 し な い は ず だ
19. Writing Modes Level 4 現 在 Ｃ Ｒ （ 勧 告 候 補 ） の 段 階 に あ り 、 縦 横 混 植 を 想 定 し た 内 容 が 含 ま れ て い る 縦 横 混 植 時 の 内 在 サ イ ズ 定 義 が 追 加 実 装 上 の 問 題 が 報 告 さ れ て い る 横 ス ク ロ ー ル の 発 生 を 回 避 す る 自 動 マ ル チ カ ラ ム 化 の 挙 動 か な り 意 欲 的 課 題 は ま だ 多 く あ る が 、 火 は 灯 っ て い る 日 本 語 話 者 の 当 事 者 と し て 縦 書 き と 横 書 き を 併 用 す る 当 事 者 と し て 黙 っ て み て い て は い け な い
20. デ ジ タ ル 文 書 へ の 取 り 組 み 作成が進む「 日本語デジタルテキスト組版の要件」
21. W e b サ イ ト で 縦 書 き を 使 う 、 縦 書 き の W e b サ イ ト を 作 る Ｗ ｅ ｂ に 縦 書 き は 実 装 さ れ 、 欠 か せ な い 存 在 と な っ て い る し か し 、 ま だ 「 当 た り 前 」 で は な い Ｗ ｅ ｂ 縦 書 き の さ ら な る 普 及 、 そ れ を 「 Ｗ ｅ ｂ サ イ ト 」 と 呼 べ な け れ ば 、 日 本 語 デ ジ タ ル 文 書 の 円 熟 は な い
22. 誰 berlysia （ べるりしあ） 妄 想 を 現 実 に す る 活 動 を し て い ま す ド ワ ン ゴ 教 育 事 業 Ｗ ｅ ｂ フ ロ ン ト エ ン ド な ん で も 屋 縦 書 き を 業 務 で 使 っ て い る Ｔ Ｓ Ｋ ａ ｉ ｇ ｉ 主 催 の ひ と り Ｔ Ｓ Ｋ ａ ｉ ｇ ｉ ２ ０ ２ ６ ５ 月 22 ・ 23 日 に 東 京 ・ 羽 田 で 開 催 Ｗ ｅ ｂ の 縦 書 き に 真 剣 な 一 般 人
23. W e b サ イ ト で 縦 書 き を 使 う 、 縦 書 き の W e b サ イ ト を 作 る berlysia / BuriKaigi 2026