Slide 1

Slide 1 text

日 本 語 縦 書 き W e b の 現 在 地 berlysia

Slide 2

Slide 2 text

「Webで縦書き」って、できるんですか? 「縦書きができる」って、どういうことですか?

Slide 3

Slide 3 text

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 年 頃 か ら 議 論 は さ れ て い た

Slide 4

Slide 4 text

実 際 に 使 わ れ て い る サ イ ト p i x i v 小 説 様 2 0 1 5 年 6 月 に ネ イ テ ィ ブ 縦 書 き 対 応 🔗 2 0 1 5 年 、 今 年 は 縦 書 き の 年 と 言 っ て も 過 言 で は な い で し ょ う 。 Z E N S t u d y ( 旧 N 予 備 校 ) ZEN Studyの縦書き 国 語 の 教 材 で が っ つ り 利 用 し て い ま す [ P R ] そ の ほ か 、 意 外 と い ろ ん な と こ ろ に …… ア ニ メ や ゲ ー ム の キ ャ ラ ク タ ー 紹 介 ペ ー ジ で セ リ フ 表 現 に L P の タ イ ト ル や 途 中 に 挟 ま っ て い る

Slide 5

Slide 5 text

な ん な ら こ こ に も …… ? https://fec-tokyo.github.io/2025/

Slide 6

Slide 6 text

writing-mode プ ロ パ テ ィ 取 り う る 値 horizontal-tb ( 初 期 値 ) 行 が 上 か ら 下 に 並 ぶ 横 書 き vertical-rl 行 が 右 か ら 左 に 並 ぶ 縦 書 き vertical-lr 行 が 左 か ら 右 に 並 ぶ 縦 書 き 継 承 す る ど こ か に 書 け ば そ の 下 に 全 部 効 く ア ニ メ ー シ ョ ン し な い

Slide 7

Slide 7 text

あ り が ち な 外 観 そ の い ち メ ロ ス は 激 怒 し た 。 必 ず 、 か の 邪 智 暴 虐 の 王 を 除 か な け れ ば な ら ぬ と 決 意 し た 。 メ ロ ス に は 政 治 が わ か ら ぬ 。 メ ロ ス は 、 村 の 牧 人 で あ る 。 笛 を 吹 き 、 羊 と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 母 も 無 い 。 女 房 も 無 い 。 十 六 の 、 内 気 な 妹 と 二 人 暮 し だ 。

Slide 8

Slide 8 text

あ り が ち な 外 観 そ の に と 遊 ん で 暮 し て 来 た 。 け れ ど も 邪 悪 に 対 し て は 、 人 一 倍 に 敏 感 で あ っ た 。 き ょ う 未 明 メ ロ ス は 村 を 出 発 し 、 野 を 越 え 山 越 え 、 十 里 は な れ た 此 の シ ラ ク ス の 市 に や っ て 来 た 。 メ ロ ス に は 父 も 、 母 も 無 い 。 女 房 も 無 い 。 十 六 の 、 内 気 な 妹 と 二 人 暮 し だ 。 こ の 妹 は 、 村 の 或 る 律 気 な 一 牧 人 を 、 近 々 、 花 婿 と し て 迎 え る 事 に な っ て い た 。 結 婚 式 も 間 近 か な の で あ る 。 メ ロ ス は 、 そ れ ゆ え 、 花 嫁 の 衣 裳 や ら 祝 宴 の 御 馳 走 や ら を 買 い に 、 は る ば る 市 に や っ て 来 た の だ 。 先 ず 、 そ の 品 々 を 買 い 集 め 、 そ れ か ら 都 の 大 路 を ぶ ら ぶ ら 歩 い た 。 メ ロ ス に は 竹 馬 の 友 が あ っ た 。 セ リ ヌ ン テ ィ ウ ス で あ る 。 今 は 此 の シ ラ ク ス の 市 で 、 石 工 を し て い る 。 そ の 友 を 、 こ れ か ら 訪 ね て み る つ も り な の だ 。 久 し く 逢 わ な か っ た の だ か ら 、 訪 ね て 行 く の が 楽 し み で あ る 。 歩 い て い る う ち に メ ロ ス は 、 ま ち の 様 子 を 怪 し く 思 っ た 。

Slide 9

Slide 9 text

縦 書 き を 試 す と き に 覚 え て お い て ほ し い こ と writing-mode は 継 承 す る ど こ か に 書 け ば そ の 下 に 全 部 効 く 縦 書 き の ブ ロ ッ ク は 縦 を 占 め よ う と す る ブ ロ ッ ク 整 形 コ ン テ キ ス ト の 動 作 ス ク ロ ー ル が 起 き る と き は 、 ス ク ロ ー ル す る 要 素 を 縦 書 き に す る さ も な い と 文 の 頭 が 隠 れ る 動 的 ス ク ロ ー ル 位 置 調 整 と か し な い こ と

Slide 10

Slide 10 text

text-orientation プ ロ パ テ ィ 取 り う る 値 mixed ( 初 期 値 ) 縦 書 き CSS で あ そ ぼ う upright 縦 書 き C S S で あ そ ぼ う sideways 縦書きCSSであそぼう text-combine-upright プ ロ パ テ ィ 取 り う る 値 none ( 初 期 値 ) 123 12345 all 123 12345

Slide 11

Slide 11 text

こ こ 10 年 で よ く な っ た こ と

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

論 理 プ ロ パ テ ィ が ど う 嬉 し い か Logical properties BaselineWidely available 縦 横 切 り 替 え の あ る UI を 共 通 化 で き る ltr/rtl 切 り 替 え に も 使 え る よ り meaningful な 記 述 が で き る 上 下 左 右 が 重 要 な ら width/height た と え ば 「 影 が 落 ち る 方 向 」 は 画 面 上 で 一 貫 し て い る 必 要 が あ る だ ろ う 書 字 方 向 が 重 要 な ら inline/block グ ラ デ ー シ ョ ン 周 り な ど 未 対 応 部 分 も あ る が 、 徐 々 に 広 が っ て い る

Slide 14

Slide 14 text

論 理 プ ロ パ テ ィ が ど う 嬉 し い か 横書き 物理:left/right 物理:top/bottom 論理:inline 論理:block 縦 書 き 物 理 : left/right 物 理 : top/bottom 論 理 : inline 論 理 : block

Slide 15

Slide 15 text

フ ォ ー ム 対 応 Vertical form controls Baseline2024 NEWLY AVAILABLE 名 前 : こ ん に ち は 選 択 肢 1 選 択 肢 1 選 択 肢 2 選 択 肢 3 フ ァ イ ル を 選 択 選 択 さ れ て い ま せ ん

Slide 16

Slide 16 text

仕 様 レ ベ ル で 解 消 し て い な い 問 題 フォントをロードするまで文字の縦横を確定させられない 縦書きHTMLにおける文字の向きはどのように定まるか

Slide 17

Slide 17 text

エ コ シ ス テ ム の 課 題 marginX の よ う な 物 理 方 向 の 実 装 に margin-inline を 使 わ れ る 事 例 Chakra UI (X 方 向 の み ) Tailwind CSS v4 Panda CSS Tailwind CSS v4 は 意 図 的 に 誤 用 「 生 成 さ れ る CSS の 量 が 大 幅 に 減 る 」 「 こ の 変 更 で 影 響 を 受 け る 現 実 的 な プ ロ ジ ェ ク ト は 存 在 し な い と 考 え ら れ る 」 直 撃 し た 😇

Slide 18

Slide 18 text

「 日 本 語 」 を 扱 う 上 で ま だ で き な い こ と ある要件が満たされているか、 満たされていない場合どれくらい影響が大きいかを示す凡例 Japanese Gap Analysis

Slide 19

Slide 19 text

「 Web で 縦 書 き が で き る 」 どこをにらむか

Slide 20

Slide 20 text

デ ジ タ ル デ バ イ ス の 上 の 縦 書 き 縦書きと横書きのスクロール方向の違い 「縦書きならば横スクロール」なのだろうか?

Slide 21

Slide 21 text

デ ジ タ ル デ バ イ ス の 上 の 縦 書 き たとえば、縦書きのマルチカラムならば 縦スクロールの縦書きが可能となる

Slide 22

Slide 22 text

JLReq-d 作成が進む「日本語デジタルテキスト組版の要件」

Slide 23

Slide 23 text

ブ ラ ウ ザ ベ ン ダ ー の 関 心 は 得 ら れ る か ?

Slide 24

Slide 24 text

縦 書 き へ の 追 い 風 (画像はカット) モンゴル文字 / 左から右に行が進む縦書き

Slide 25

Slide 25 text

日 本 語 の 縦 書 き の 立 ち 位 置 横書き登場 - 日本語表記の近代, 屋名池 誠 著 🔗

Slide 26

Slide 26 text

日 本 語 の 縦 書 き の 立 ち 位 置 右 横 書 き 西 洋 に 憧 れ て 、 そ の 風 合 い を 取 り 入 れ る 流 れ か ら 左 横 書 き 西 洋 の 文 字 と 一 緒 に 記 述 す る こ と か ら 発 展 し た 。 ど ち ら も 幕 末 〜 明 治 期 に 生 じ た 「 左 横 書 き が メ イ ン 、 縦 書 き を 併 用 」 い ろ い ろ あ っ た う え で 、 戦 後 に よ う や く 到 達

Slide 27

Slide 27 text

「Webで縦書き」って、できるんですか? ……多少できるが、まだ足りない

Slide 28

Slide 28 text

な ぜ 私 が Web 上 の 縦 書 き に こ だ わ る か 縦 書 き は 多 少 で き る が 、 ま だ 足 り な い 動 い て い る 人 が い る 、 流 れ が き て い る 縦 書 き が あ る と 、 表 現 の 幅 が 広 が る 縦 書 き で 遊 ん で み て く だ さ い

Slide 29

Slide 29 text

よ く し た い