起こしの鉤括弧とＣＳＳ

経験上、一度始めたらすぐに半日、ときには丸々一日を無駄にすることが分かっているのに、どうしても始めたくなる。このサイトのＣＳＳの変更。大体年に２回はこの時間を食う衝動に駆られる。ＣＳＳとは Cascading Style Sheets の頭文字で、おおまかに言うとウェブページがどのように表示されるかを指定する文書。例えば文字の大きさや太さや行間や位置。多くの場合、変更するのは閲覧者が気づかないほど僅かな差。小さなことに膨大な時間と労力を使って得られるものは見合わないと自分でも分かっているが、細かくても不備と感じてしまうとどうも気になって仕方がない。ここ数回のＣＳＳ変更・修正は微調整と呼べたかもしれないが、今回は結構差が出る変更になった。それも解決方法のない難題にぶつかった。起こしの鉤括弧など括り符で始まる文章をどのように揃えるか。

日本語フォントの字幅は等幅フォントとプロポーショナル・フォントの２種類。等幅フォントは字の幅が固定されている。原稿用紙で拗音促音でも１マス使うようなもの。符号も１マス。でも拗音促音符号の場合マス全域を使うわけではなく、マスを２分割ないし４分割したら空白の箇所もある。プロポーショナル・フォントは字の幅が変わり、細い字もあれば太い字もあり、字・記号の間の空白も詰められる。等幅フォントであれば１行の文字数が原稿用紙のマス数のように決まっているが、プロポーショナル・フォントだと字ごとに変わり空白を詰める分、同サイズの等幅フォントよりも多い。

書体は主に明朝体とゴシック体があるので、組み合わせとしては明朝体等幅・明朝体プロポーショナル・ゴシック体等幅・ゴシック体プロポーショナルが存在する。どれが一番読みやすいかは人によって違う。長い文章は出版物に多い明朝体等幅フォントがウェブでも読みやすいと私は感じるが、ゴシック体プロポーショナル・フォントが読みやすい人もいるだろう。記事本文で私は明朝体 (ui-serif, serif) を指定しているが、特定のフォントは指定していない。閲覧者の設定によっては等幅フォントかもしれないし、プロポーショナル・フォントかもしれない。フォントを選ぶのはサイト運営者かそれとも閲覧者であるべきか両論それぞれ言い分があるが、ここ数年は閲覧者に委ねるという考えになっている。端末やディスプレイがきれいになり、ほとんどの場合ＯＳまたはブラウザーの初期設定のフォントが読みやすくなったのが大きい。そして何らかの理由で特定のフォントを使わなければならい閲覧者がいるかもしれないので、アクセシビリティーの観点からサイト運営者の好みで細かく設定することを避けた方が無難なような気がする。読んでほしいのは内容であって、フォントを見てほしいわけではない。

段落の最初の１マスを空ける、つまり１字下げるには、ＣＳＳで以下のように記述する。

等幅フォントでもプロポーショナル・フォントでもフォントの大きさの全角１字空く。例えば

であれば、１８ピクセル。文字で始まる文であれば全く問題はない。厄介なのは、例えば新しい段落を起こしの鉤括弧で始める場合。横書き原稿用紙であれば２マス目ではなく、１マス目の右半分を使いたいとき。

１字下げの設定のままだと、等幅フォントの場合、全角が空いてさらに２分空いて、つまり１字半下がってようやく起こしの鉤括弧が表示される。横書き原稿用紙であれば２マス目の右半分に相当する。プロポーショナル・フォントだと全角空いたあとすぐに起こしの鉤括弧が表示される。

等幅フォントであれば、字下げをなくして

を使えば良いが、プロポーショナル・フォントだと行頭に隙間がなく、起こしの鉤括弧が表示されて天付きになる。そうなると新しい段落なのか、それとも文中にあって折り返して行頭にあるものなのか区別がつかないし、私にとってだけかもしれないが、読みにくくなる。また記述記号で始まる段落だけ違うＣＳＳクラスを指定する必要が発生する。

なお等幅フォントを

で指定しても

のようにプロポーショナル・フォントを指定していて、そのフォントがある場合は、プロポーショナル・フォントが使われて、等幅フォントにはならない。全ての環境で試したわけではないが

が有効なのはフォントが等幅の場合で、半角で入力された文字（特に英数字）が全角表示になる。フォントがプロポーショナルの場合は等幅にならない。同様に

が有効なのは、フォントが等幅の場合で、全角で入力された英数字が半角表示になる。日本語は等幅フォントのまま。もともとプロポーショナル・フォントであれば変わりがない。そのため font-variant-east-asian の full-width / proportional-width が役に立つのは、理論上、一つのフォントに等幅とプロポーショナル両方がある場合、または font-family の総称フォントを等幅かプロポーショナルかでブラウザーが優先度を変える場合だろうが、調べたところどちらも現在はない。

では起こしの鉤括弧を２分（半角）だけ下げるにはどうすれば良いのか。もちろん

のように等幅の web フォントを使ったり、特定の等幅フォントを指定すれば良いのだろうが、それを避けたい場合はどうすべきか。

ブラウザーのＨＴＭＬレンダリング・エンジンは大きく分けて Safari などの WebKit, Chrome, Edge, Opera などの Blink, Firefox などの Gecko の３種。私は Apple 端末を持っていないので、自分のサイトが Safari でどのように表示されているのか知る術がない。日本に iPhone 利用者が多いので悩むところ。できるのは WebKit の GNOME Web (Epiphany) で確認すること。最終手段は街中の Apple Store に行っての確認だが、そんな暇なことはやっていられない。全てのブラウザーが全てのＣＳＳプロパティーに対応しているわけではない。

ＣＳＳプロパティーに hanging-punctuation というのがある。

であれば、行末の句読点のぶら下げを必要とあれば認める。マージンやパディングなどの余白にはみ出す。

と指定すれば約物に限り必要な分だけ行頭にはみ出す。つまり

と指定すれば、文字で始まる文章は１字下げ、起こしの鉤括弧であれば前にはみ出す。等幅フォントであれば２分、プロポーショナル・フォントであれば起こしの鉤括弧の幅だけはみ出す。

一番簡単で問題をきれいに解決するのだが、残念なことに caniuse.com や MDN Web Docs で調べると、このＣＳＳに対応しているのは、主要ブラウザーでは Safari のみ。一応 GNOME Web で確認したところ、適用されていたので、おそらく Safari でも適用されているだろう。他のブラウザーだと等幅フォントであれば１字半、プロポーショナル・フォントであれば１字空いてしまう。１字半はかなり下がっているように見える。

等幅フォントの場合、記述記号が重なる場合、ブラウザーが空間を詰めることがある。プロポーショナル・フォントの場合は空間が発生しない。【（１）】、『「２」』・〈｛３｝〉はどのように表示されているだろうか。詰めなければ、２分空き・起こしの隅付き括弧・２分空き・起こしのパーレン・全角数字１・受けのパーレン・２分空き・受けの隅付き括弧・２分空き・読点・２分空き・２分空き（合わせて全角空き）・起こしの二重括弧・２分空き・起こしの鉤括弧・全角数字２・受けの鉤括弧・２分空き・受けの二重括弧・２分空き・４分空き・中黒・４分空き・２分空き・起こしの山括弧・２分空き・起こしのブラケット・全角数字３・受けのブラケット・２分空き・受けの山括弧・２分空き。

ブラザーによって処理が違うが、基本的に行中そして行末は詰めている。等幅フォントで行末に全角分の空きがなくても２分あれば、行末と行頭禁則に触れなければ記述記号を表示する。行頭はデフォルト設定では詰めないようになっているが、ＣＳＳで行頭でも詰めることができる。

と指定した場合、行頭の等幅フォントの記述記号が２分詰めて天付きになる。そのため

と指定すれば、新しい段落を起こしの鉤括弧で始めたら、等幅フォントでも１字下げのあとすぐに鉤括弧が表示される。１字半下がるよりは良い。ただこのＣＳＳプロパティーも Chrome, Edge, Opera などは対応しているが Firefox や Safari などは未対応。

結局

を指定した。これで起こしの鉤括弧で始まる段落は主要ブラウザーで以下のようになる。

Safari で、私が意図している形で表示されるはず。

Chrome, Edge, Opera で、等幅フォントでも１字半下げではなく、プロポーショナル・フォント同様に１字下げで表示される。

Firefox で、等幅フォントだと１字半下げになって、プロポーショナル・フォントでは１字下げで表示される。

いずれ全てのブラウザーが hanging-punctuation と text-spacing-trims に対応するようになれば良いのだが、いつのことになるだろう。