Slide 1

Slide 1 text

7JWMJPTUZMFKT ͷઌߦ࣮૷͔Βߟ͑Δ $44UFYUTQBDJOH ϓϩύςΟ 鈴⽊丈

Slide 2

Slide 2 text

text-spacing は CSS Text Module Level 4 のプロパティで、 特定のキャラクターのスペーシングをコントロールするもの 2022 年 11 ⽉現在では実装しているブラウザーはまだないが、 Vivliostyle.js はこの機能を先⾏実装している ここでは⽇本語タイポグラフィにおける 和欧間、連続する約物、⾏頭・⾏末の約物のスペーシングについて、 Vivliostyle.js の実装を⾒ながら考察したい

Slide 3

Slide 3 text

໨࣍ text-spacing プロパティ 和欧間のスペーシング 連続する約物のスペーシング ⾏頭・⾏末の約物のスペーシング

Slide 4

Slide 4 text

text-spacing プロパティ

Slide 5

Slide 5 text

UFYUTQBDJOH ϓϩύςΟ /* Value */ normal | none | auto | no-compress || [ trim-start | space-start | space-first ] || [ trim-end | space-end | allow-end ] || [ trim-adjacent | space-adjacent ] || ideograph-alpha || ideograph-numeric || punctuation /* Example */ body { text-spacing: trim-start space-end trim-adjucent ideograph-alpha ideograph-numeric; }

Slide 6

Slide 6 text

和欧間のスペーシング

Slide 7

Slide 7 text

೔ຊޠ૊൛ͷඪ४ ⽇本語組版において、テクストのなかに 欧⽂(ラテン⽂字)を配置する場合、 和⽂と欧⽂とのあいだにアキ(スペース) を置くのが⼀般的 アキ量(スペースの幅)は 1/4 em(四分) を基本とし、1/3 em から 1/8 em 程度の あいだで調整される

Slide 8

Slide 8 text

೔ຊޠ૊൛ͷඪ४   和⽂組版の中に欧⽂が混植される場合、   和欧⽂間の字間は通常四分(ないし三分程度)空け、   許容最⼩値(約 1/6 em)と最⼤値(約 1/2 em)を設定する。   …(数字と欧⽂の間の空きについては、   和欧⽂間の空きより 1/6 em 程度⼩さくするという意⾒もある)  府川充男『組版原論』1996   英数字の登場頻度が⾼い場合は 0〜12.5%、   ⼀般的には 12.5〜25% が望ましいが、   英数字の登場頻度や媒体の性質、⽂章の内容   に応じてアキを調節するようにしたい。  ⼯藤強勝(監修) 『 デザイン解体新書』2006

Slide 9

Slide 9 text

Ԥจͷϫʔυεϖʔε 欧⽂のワードスペース(単語間のアキ)は 1/4 em が平均で、 組み⽅や⽂字サイズなどによって 1/3 em から 1/5 em 程度のあいだで調整   はっきりと空いていることがわかるが、   空きすぎてはいない単語間とは、   普通 em スペースの 4 分の 1 ほどだ。   たとえば 10 pt で組む場合には 2.5 pt となる。   しかし最終的な判断は、例によって、   眼でしっかりと⾒て決めるしかない。  ヨースト・ホフリ『ディテール・イン・タイポグラフィ』2017

Slide 10

Slide 10 text

$44UFYUTQBDJOH ϓϩύςΟ ideograph-alpha   CJK キャラクターと⾮ CJK  ⽂字のあいだにアキを作る ideograph-numeric   CJK キャラクターと⾮ CJK  数字のあいだにアキを作る /* Example */ body { text-spacing: trim-start space-end trim-adjucent ideograph-alpha ideograph-numeric; }

Slide 11

Slide 11 text

7JWMJPTUZMFKTʹΑΔ࿨ԤؒͷΞΩͷ࣮૷ Times New Roman のスペース(U+20)の幅が 1/4 em であることを利⽤して 1/6 em のアキを実現   0.25 × 0.666 = 0.166 em(1/6 em) margin ではなく content によるスペースを使う理由:  ・和欧間の境界で⾏が折り返したときアキができない  ・両端揃えのときアキがスペーシング調整の対象となる

Slide 12

Slide 12 text

NBD04 ͱ J04 ʹ͓͚Δ࿨Ԥؒͷεϖʔγϯά macOS と iOS において、アプリケーションによっては 和欧間に 1/8 em 程度のアキが⼊る(2021 年の iOS 14 から?)

Slide 13

Slide 13 text

΢Σϒʹ͓͍ͯద੾ͳ࿨ԤؒͷΞΩ͸ʁ 今後ブラウザーが text-spacing による和欧間のアキを実装するうえで、 デフォルトのアキ量はどの程度が適切か? これまでのブラウザーでは和欧間のアキがなかったうえ、 ウェブのテクストには⽂中に欧⽂が登場する頻度も⾼い そのためこれまで組版で標準とされてきた 1/4 em のアキでは読み⼿が不⾃然に感じる可能性があり、 1/6 em もしくは 1/8 em 程度の「控えめ」なアキが適切と思われる

Slide 14

Slide 14 text

連続する約物のスペーシング

Slide 15

Slide 15 text

࿈ଓ͢Δ໿෺ͷεϖʔγϯά ⽇本語の括弧類や句読点、 中点などの約物が連続する場合、 その組み合わせに応じて 約物間のアキを調節する

Slide 16

Slide 16 text

0QFO5ZQF ϑΟʔνϟʔͷར༻ 連続する約物のアキを調整する⽅法のひとつに、 OpenType フィーチャーの chws と vchw がある body { font-feature-settings: "chws" 1; } 利⽤するにはフィーチャーを組み込んだフォントが必要   約味……約物フォント   フォントプラス……ウェブフォント配信サービス   chws_tool……フォントに chws/vchw を組み込むツール

Slide 17

Slide 17 text

$44UFYUTQBDJOH ϓϩύςΟ space-adjucent   約物間を詰めず、全⾓ドリとする trim-adjucent   特定の組み合わせで約物間を詰める /* Example */ body { text-spacing: trim-start space-end trim-adjucent ideograph-alpha ideograph-numeric; }

Slide 18

Slide 18 text

7JWMJPTUZMFKT ʹΑΔ࿈ଓ໿෺ͷεϖʔγϯάͷ࣮૷ 所感  ・chws/vchwとの競合は?  ・コンデンスト体やエクスパンデッド体   では無効化?

Slide 19

Slide 19 text

⾏頭・⾏末の約物のスペーシング

Slide 20

Slide 20 text

ߦ಄ɾߦ຤ͷ໿෺ͷεϖʔγϯά ⽇本語の始め括弧類が⾏頭に配置される場合と、 終わり括弧類や句読点、中点類が⾏末に配置される場合、 その配置⽅法にはいくつかのヴァリエーションがある

Slide 21

Slide 21 text

7JWMJPTUZMFKT ʹΑΔߦ಄ɾߦ຤ͷ໿෺ͷεϖʔγϯάͷ࣮૷ 所感  ・chws/vchw では実現できない!  ・コンデンスト体やエクスパンデッド体   では無効化?

Slide 22

Slide 22 text

$44UFYUTQBDJOH ϓϩύςΟ trim-first   ⾏頭の始め括弧類の前にアキなし space-start   ⾏頭の始め括弧類の前に半⾓アキ space-first   段落 1 ⾏⽬⾏頭と強制改⾏直後の括弧類の前に半⾓アキ、それ以外はアキなし trim-end   ⾏末の終わり括弧類・句読点類・中点類の後ろにアキなし space-end   ⾏末の終わり括弧類・句読点類・中点類の後ろに半⾓アキ

Slide 23

Slide 23 text

ࢀߟจݙ CSS Text Module Level 4, 8.4. Character Class Spacing: the text-spacing property   https://www.w3.org/TR/css-text-4/#text-spacing-property Requirements for Japanese Text Layout (⽇本語組版処理の要件)   https://w3.org/TR/jlreq web における和欧間スペース from ⽊⽥泰夫 on 2022-06-27 ([email protected] Mail Archives)   https://lists.w3.org/Archives/Public/public-i18n-japanese/2022AprJun/0110.html Character design standards - Space characters for Latin 1 - Typography | Microsoft Learn   https://learn.microsoft.com/en-us/typography/develop/character-design-standards/whitespace 府川充男『組版原論 タイポグラフィと活字・写植・DTP』太⽥出版、1996 逆井克⼰『基本⽇本語⽂字組版』⽇本印刷新聞社、1999 ⼯藤強勝(監修) 『 デザイン解体新書』ワークスコーポレーション、2006 ⼤熊肇『⽂字の組み⽅ 組版/⾒てわかる新常識』誠⽂堂新光社、2010 Robert Bringhurst, The Elements of Typographic Style, 4th ed. Hartley & Marks, Publishers, 2012 ヨースト・ホフリ『ディテール・イン・タイポグラフィ』⿆倉聖⼦監修、⼭崎秀貴訳、Book & Design、2017 向井裕⼀『⽇本語組版⼊⾨ その構造とアルゴリズム』誠⽂堂新光社、2018

Slide 24

Slide 24 text

Vivliostyle.js の先⾏実装から考える CSS text-spacing プロパティ 2022年11⽉20⽇ CSS 組版 Vivliostyle ユーザーと開発者の集い 2022 秋 鈴⽊丈(すずき・たける) terkel.jp 使⽤書体 たづがね⾓ゴシック Book、Bold(Monotype) TheSans Mono Condensed Regular(LucasFonts)