Unformed Building

hanging-punctuationプロパティの採用

公開:

パーマリンク

括弧類と句読点のぶら下げを行えるhanging-punctuationプロパティは、現在のところSafariがサポートしています。
Safari 10のころに実装されたはずですので、2016年の中頃でしょうか。

この機能で何ができるのかについてはSafariでデモページを見てほしいのですが、Safariが使えない環境もありますので、スクリーンショットを載せておきます。
スクリーンショットはSafari 13.0.4での表示です。

hanging-punctuation: first
デモページ内、hanging-punctuationプロパティにfirstキーワードを指定した場合のスクリーンショット:「括弧類と、句読点のぶら下げ」とういう文字列が5em幅の要素に入っています。通常の要素内の文字列は開き鉤括弧から始まりますが、hanging-punctuationプロパティにfirstキーワードを指定すると開き鉤括弧が1文字分行頭方向に移動するので、要素内の文字列は、括弧類の、という文字列の、括、から始まっているように描画されます。
hanging-punctuation: last
デモページ内、hanging-punctuationプロパティにlastキーワードを指定した場合のスクリーンショット:「括弧類と、句読点のぶら下げ」とういう文字列が5em幅の要素に入っています。通常の要素内の文字列の最終行は、げ」、となりますが、hanging-punctuationプロパティにlastキーワードを指定すると閉じ鉤括弧が1文字分行末方向に移動するので、要素内の文字列の最終行は、のぶら下げ、となりその次に、」、が配置されて描画されます。
hanging-punctuation: allow-end
デモページ内、hanging-punctuationプロパティにallow-endキーワードを指定した場合のスクリーンショット:「括弧類と、句読点のぶら下げ」とういう文字列が5em幅の要素に入っています。通常の要素内の文字列の、括弧類と、に続く読点は、と、という文字とともに次の行に送られ、改行位置は括弧類という文字列の直後となります。しかし、hanging-punctuationプロパティにallow-endキーワードを指定すると、読点は要素外に配置されて描画されますので、と、と読点は1行目に収まっています。
hanging-punctuation: first last allow-end
デモページ内、hanging-punctuationプロパティにfirst last allow-endキーワードを指定した場合のスクリーンショット:「括弧類と、句読点のぶら下げ」とういう文字列が4em幅の要素に入っています。前述の3つの要素を持ち合わせており、開き鉤括弧、読点、閉じ鉤括弧が要素外に配置されて描画されています。通常だと4行必要になるところ、3行ぴったりで収まっています。

プロパティ値の構文や、対象となるグリフ、ぶら下げの条件については各自で仕様を見てください。

この機能によって、句読点が収まらない場合に発生する1文字と句読点という組み合わせから始まる行を抑えることができます(もちろん、句読点の前の文字が収まらない場合には結果としてそのような行が発生しますが)。

先頭の開き括弧類をぶら下げるというのは日本語ではあまり使う機会がないかもしれません。将来text-spacingが実装され、trim-startが使えるようになれば各行頭の開き括弧類の半分の空白をつめることもでるでしょうし。
欧文での引用段落のクォーテーションマークなどに向いているでしょうか。

現在、このウェブサイトにはbody { hanging-punctuation: allow-end last }が指定されています。
この機能を使うことによるデメリットは、このウェブサイトにおいては存在しないという判断です。
対応していない環境では無視されるだけで、何か不具合が起きるようなプロパティではありませんし、対応している環境では少しだけ文字組みが変更される(かもしれない)だけだからです。

ところで、デモページと仕様を見た方はお気づきでしょうが、この記事内でforce-endキーワードについて触れてきませんでした。このキーワードはSafariは対応していません。

hanging-punctuation: force-end
デモページ内、hanging-punctuationプロパティにforce-endキーワードを指定した場合のスクリーンショット:このデモの場合、allow-endキーワードと同じ描画結果になるはずですが、何も指定してないのと変わらないように描画されています。

MDNの互換データ表では完全対応となっていますが、これは誤りなので報告しておきました


Safariが対応しているhanging-punctuation、Firefoxが対応している「Segment Break Transformation Rules」、これらによって日本語のHTMLが少しずつ便利になってきました。6年半前に妄想したCSS指定が次第に現実のものとなってきて、時の流れを感じます。

文字組み周りのCSS機能は見た目の上では地味な機能だからか、それとも対応している環境が少ないからか、あまり話題になっていませんが(記事を書いている人はいます)、こういった機能はテキスト主体のウェブサイトを持つ人にとっては待ち望んでいた機能ではないかと思います。

CSS Text Moduleはウェブ・デザイナーの夢が詰まっているとわたしも思っていますので、実装が出るたびに喜んでいます。