縦書きWebの実用を支えるJavaScript - JSConf JP 2025

https://jsconf.jp/2025/en/talks/vertical-text-web-javascript
HTML版（PC推奨） https://slides.berlysia.net/jsconfjp2025-javascript-for-vertical-writing-on-the-web/

Transcript

1. 縦書きWebの実用を支えるJavaScript berlysia / JSConf JP 2025
2. 「 縦 書 き の 年 」 か ら 約 10 年 縦 書 き の Ｗ ｅ ｂ サ イ ト は 、 珍 し い メ イ ン コ ン テ ン ツ が 縦 書 き は 、 珍 し い 実 装 す る 経 験 が あ る 人 は 、 珍 し い → 紹 介 の し 甲 斐 が あ る ！ Ｊ Ｓ の 話 を し ま す 、 が う ま く で き な い 部 分 を が ん ば る 話 な ぜ Ｊ Ｓ が 必 要 に な る か に 集 中 し ま す 実 装 の 細 か い 話 は し ま せ ん
3. ス ク ロ ー ル の 諸 問 題 メロスは激怒した。必 ず、かの邪智暴虐の王を 除かなければならぬと決 意した。メロスには政治 がわからぬ。メロスは、 村 牧人 ある 笛を吹 メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ 。 笛 を 吹
4. 左 右 方 向 の ス ク ロ ー ル 1 2 ← → お そ ら く 身 構 え ま す よ ね ？ ス マ ホ の 左 右 は 狭 い ホ イ ー ル ス ク ロ ー ル が 基 本 上 下 の み シ フ ト キ ー で 左 右 も で き る が …… 定 番 ア プ ロ ー チ は い ろ い ろ あ る ど れ が 使 え る か は 要 件 次 第
5. 上 下 を 左 右 に マ ッ プ す る const contentEl = document.querySelector("#content"); contentEl.addEventListener("wheel", e => { if (e.deltaX !== 0) return; if (e.deltaY === 0) return; if (e.ctrlKey /* 修飾類*/) return; e.preventDefault(); e.currentTarget.scrollLeft += e.deltaY; }, { passive: false, });
6. 「 進 む 」 感 覚 が 逆 に な る 1 2 メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ 。 笛 を 吹 上（戻る） 下（進む） ボ タ ン を 押 し て み る マ ウ ス で も や っ て み る い つ も の 「 進 む 」 方 向 と 逆 シ フ ト キ ー で も こ の 感 覚 に な る
7. ス ク ロ ー ル の 座 標 系
8. ス ク ロ ー ル の 座 標 系 素朴なフローレイアウトのもとでどこに属するか
9. 下 は 右 に マ ッ プ さ れ る const contentEl = document.querySelector("#content"); contentEl.addEventListener("wheel", e => { if (e.deltaX !== 0) return; if (e.deltaY === 0) return; if (e.ctrlKey /* 修飾類*/) return; e.preventDefault(); e.currentTarget.scrollLeft += e.deltaY; }, { passive: false, });
10. 「 下 」 で 進 む 感 覚 の た め に は const contentEl = document.querySelector("#content"); contentEl.addEventListener("wheel", e => { if (e.deltaX !== 0) return; if (e.deltaY === 0) return; if (e.ctrlKey /* 修飾類*/) return; e.preventDefault(); - e.currentTarget.scrollLeft += e.deltaY; + e.currentTarget.scrollLeft -= e.deltaY; }, { passive: false, });
11. 独 立 に ス ク ロ ー ル さ せ る header メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 footer 固 定 の 画 面 内 に 横 ス ク ロ ー ル を お く ス ク ロ ー ル バ ー が 横 向 き に 出 る
12. 長 く て も 同 じ header メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 footer ス ク ロ ー ル 領 域 は 入 れ 子 に な っ て い る 縦 ス ク ロ ー ル を 阻 害 し な い よ う 要 調 整 overscroll-behavior も 考 慮 す る
13. ス ク ロ ー ル 方 向 の 扱 い は い い 感 じ に な ら な い か ？ …… 難 し そ う 要 素 の 「 優 先 ス ク ロ ー ル 方 向 」 の 類 自 動 算 出 は 困 難 Ｃ Ｓ Ｓ で 宣 言 可 能 に は で き そ う デ バ イ ス の 主 要 ス ク ロ ー ル 方 向 ホ イ ー ル の 自 由 度 が わ か ら な い ボ タ ン の 有 無 も わ か ら な い フ ィ ン ガ ー プ リ ン ト に な り 望 み 薄 Ｊ Ｓ を 使 い 続 け る し か な い
14. 縦 ス ク ロ ー ル ＋ translateX header テ ィ ザ ー サ イ ト 的 な や つ な ら 便 利 よ く あ る ス ク ロ ー ル 駆 動 メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 母 も 無 い 。 女 房 も 無 い 。 十 六 気 妹 暮
15. や り た い の は 本 当 に こ れ か ？ 「 縦 書 き に 特 化 」 し た く な い 縦 だ っ た り 横 だ っ た り し た い 選 択 肢 と し て 縦 書 き を 選 び た い あ ん ま り 特 殊 に し た く な い 既 存 の デ ザ イ ン と 共 存 し た い 自 然 に 組 み 合 わ せ た い
16. た と え ば こ ん な 感 じ で header side メロスは激怒した。必ず、かの邪智暴 虐の王を除かなければならぬと決意 した。メロスには政治がわからぬ。 メロスは、村の牧人である。笛を吹 き、羊と遊んで暮して来た。けれども 邪悪に対しては、人一倍に敏感であ った。きょう未明メロスは村を出発 し、野を越え山越え、十里はなれた 此のシラクスの市にやって来た。メ ロスには父も、母も無い。女房も無 い。十六の、内気な妹と二人暮し 縦 書 き に も こ の 趣 が 欲 し い 当 た り 前 に 縦 書 き を 含 め た い 途 中 に 縦 書 き が 現 れ て も い い
17. 縦 書 き ＋ マ ル チ カ ラ ム header side メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 ス は 村 を 出 発 し を 越 え 山 越 え 、 は な れ た 此 の シ ス の 市 に や っ て た 。 メ ロ ス に は も 、 母 も 無 い 。 も 無 い 。 十 六 の 気 な 妹 と 二 人 暮 だ 。 こ の 妹 は 、 或 る 律 気 な 一 牧 良 さ そ う な 感 じ が す る …… …… な ん か
18. 適 当 に 高 さ を 当 て て や る const contentEl = document.querySelector("#content"); function updateHeight() { const scrollHeight = contentEl.scrollHeight; contentEl.style.height = `${scrollHeight}px`; } updateHeight(); const observer = new ResizeObserver(() => { updateHeight(); }); observer.observe(contentEl);
19. 縦 書 き ＋ マ ル チ カ ラ ム header side メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 ス は 村 を 出 発 し を 越 え 山 越 え 、 は な れ た 此 の シ ス の 市 に や っ て た 。 メ ロ ス に は も 、 母 も 無 い 。 も 無 い 。 十 六 の 気 な 妹 と 二 人 暮 だ 。 こ の 妹 は 、 或 る 律 気 な 一 牧 い い 感 じ に 高 さ を 測 っ て や る
20. 縦 書 き マ ル チ カ ラ ム は い い 感 じ に な る か ？ 主 要 ブ ラ ウ ザ す べ て オ ー バ ー フ ロ ー 安 定 し て 動 い て な い そ れ ぞ れ 個 別 の 問 題 も あ る 2019 年 時 点 で 仕 様 待 ち の コ メ ン ト Chromium の issue Writing Modes Level 4 親 子 で 縦 横 異 な る 場 合 の 記 述 追 加 各 所 意 欲 は あ る よ う に 見 え る 私 が 欲 し い の で 、 押 し 込 み た い
21. な ぜ 縦 書 き に こ だ わ る か 日 本 語 は 縦 書 き と 横 書 き が で き る 言 語 横 書 き を メ イ ン に し な が ら も 適 宜 縦 書 き を 使 っ て い る の が 現 在 片 方 し か で き な い 言 語 が 大 半 縦 書 き が 「 優 れ て い る 」 と は 思 わ な い た だ の 選 択 肢 の 一 つ 、 そ れ が い い 望 め ば 当 た り 前 に 使 え て ほ し い 適 し た 方 を 選 べ ば い い 空 間 を 使 う の に 便 利 と か 馴 染 み の あ る ス タ イ ル と か 縦 書 き の 活 用 が 広 が る こ と は 、 縦 横 の 混 在 が 容 易 に な る こ と は 、 デ ジ タ ル 文 書 の 表 現 を 豊 か に す る だ ろ う 紙 に 習 っ て 、 紙 に で き な い こ と を し よ う
22. 誰 berlysia （べるりしあ） 妄 想 を 現 実 に す る 活 動 を し て い ま す ド ワ ン ゴ 教 育 事 業 フ ロ ン ト エ ン ド な ん で も 屋 Ｔ Ｓ Ｋ ａ ｉ ｇ ｉ 主 催 の ひ と り 来 週 は 北 陸 で お 会 い し ま し ょ う 2026 も 動 き 出 し ま し た Ｗ ｅ ｂ 縦 書 き ガ チ 勢