|13| 固定値の位置 Wordを深掘り

|13| 固定値の位置 Wordを深掘り

前回、固定値にすると文字の位置が下がると書きましたが、グリッド線を表示させてみると文字の下側にいくらか空きができます。行間隔の値を変えてみると一定の空きではなく行間隔の値に応じて変化しているように見えます。何を基準にしているのか知りたくなり、調べてみました。游明朝DBではベースラインを基準にしてそれより上が行間隔の値の80%、下が20%になっています。

詳しく説明する前に「ベースライン」と文字の大きさを決める「仮想ボディ」の説明をします。

ベースライン

ベースラインとはアルファベットの小文字の「x」の下端に接する線です。どのような言語のフォントでもアルファベットと混在させる必要があるのでベースラインが設定されています。ベースラインから「x」の上端までの高さを「xハイト」と言います。

ベースラインの位置はフォントによって異なっているのですが、日本語フォントでは漢字との組み合わせを考えて、下から12%前後の位置に設定されていることが多いようです。アルファベットでは字形のデザインによってベースラインが異なります。

 

Adobe Illustrator
Word

Adobe Illustratorで様々なフォントの「x」を入力してみました。テキストボックスを使った「エリア内入力」ではなく、改行を入れないと文字を折り返さない「ポイント文字入力」です。
Wordでも同じように入力しています。

フォントは左から游ゴシックB、Arial、Century、Century Gothic、Elephant,Eras Demi、Verdana、Tw Cen MT、Garamond、全て100ptの大きさです。
Illustratorでは同じ段落内でもフォントによってベースラインの位置が様々ですが、Wordでは同じ位置に揃えられているのが分かります。

 

Wordでも同じ段落内に1種類のフォントだけであればベースラインの位置は変わります。
左上:游ゴシックB、左下:Century Gothic、右上:Tw Cen MT、右下:Viner Hand ITC、100ptです。
左列と右列が同じ段落にならないよう、2段組になっています。行送りは180pt、青いラインは180pt間隔で引かれています。

フォントを混在させると日本語フォントがあればベースラインは日本語に合い、アルファベットだけの場合だとベースラインの低い方に合うようですが少しずれる感じです。Century GothicとTw Cen MTの組み合わせだけなので他はわかりません。
Viner Hand ITCがあるとほかのフォントのベースラインを強引にViner Hand ITCに合わせる感じです。「h」の上端から「y」の下端までは指定した100ptより大きく140ptにもなりますから、特別なのかもしれません。

 

日本語のフォントに含まれるアルファベットの場合は漢字とのバランスを考慮して見かけのベースラインとデータとしてのベースラインがずれている場合があります。游明朝、游ゴシックでは顕著で、一番左の「x」はCentury Gothic、二番目は游明朝DB、游明朝L、游ゴシックB、游ゴシックLと続きます。太さが細くなると大きさも小さめにベースラインも少しづつ上がっているのが分かります。
游ゴシックBはCentury Gothicと同じベースラインになりますから、見かけのベースラインとデータとしてのベースラインが同じであることが分かります。

 

仮想ボディ

文字が切れる切れないを考えるとき「仮想ボディ」と「字面」を理解しておくことが必要です。

 

仮想ボディとは日本語の漢字やかなに設定される四角形で文字の大きさの基準になります。漢字では正方形に設定するのが一般的です。日本語の字形はこの仮想ボディより少し小さめにデザインされます。字形の範囲を字面(じづら)と言い、字面が仮想ボディより小さいので100ptの文字を100ptの幅で並べても文字と文字が接することはありません。

青い正方形が仮想ボディで赤い枠線が字面の枠線になります。
漢字の場合、字面は仮想ボディに対して90%前後の大きさを持ちますが、フォントによっても、字形によっても異なっています。游ゴシックでは左右の空きが多く、「馬」と「台」を比較すると高さに変化があります。メイリオは左右の空きが狭く高さの変化も少なくデザインされています。
字面の設定によって切れやすいフォント、字形が出てきます。

 

固定値の位置

固定値の位置を調べる方法です。

 

|ファイル > オプション > 詳細設定|と選択し、中段あたりの「表示」項目の「使用する単位」を「ポイント(pt)」に変えておきます。ここをポイントにしたままですと他のファイルもポイント表示になってしまいますので、元に戻すのを忘れずに。

 

游明朝DBで文字を入力します。カギ括弧の「」を含めます。また、小文字の「x」を英字(半角英数)モードで入力し、フォントをCenturyにします。前にも書きましたが、日本語フォントのアルファベットは見かけのベースラインとデータとしてのベースラインの設定が異なることがあるので欧文フォントを選択します。

ページ設定で行送りを100ptにしておきます。文字を100ptに設定し、段落ダイアログで行間隔を2行にします。行揃えを左揃えにします。
こうしておけば日本語フォントによって行送りが変わることはありません。

水平な直線を挿入し、「文字列の折り返し」を「前面」に、ズームを出来るだけ拡大して「x」の下端に合わせます。必要に応じて矢印キーを使います。直線は選択しづらいので|描画ツール > 書式 > 配置 > オブジェクトの選択と表示|でオブジェクトのリストを表示させ、リストから選択することもできます。

 

仮想ボディの中で字面をどの辺りの位置に設定しているかは字形をデザインした人でないとわかりません。そこでカギ括弧上端から下端までの長方形の上下中心と仮想ボディ上下の中心は一致するものと考えます。実際にはそうでないかもしれませんが、目安として考えてください。

長方形を挿入して、枠線なし、塗りつぶしに色をつけ、「塗りつぶしの色」のところから透明度を70%程度にします。ズームを出来るだけ拡大して、カギ括弧の上端から下端へ長方形の高さを合わせます。この長方形をコピー、貼り付けし別の色に変えます。|描画ツール > 書式 > サイズ|で高さを100ptにします。2個の長方形を同時に選択し|描画ツール > 書式 > 配置 > 配置|から「上下中央揃え」を選択します。揃ったら同時に選択したまま、字面の高さを合わせた長方形の上下をカギ括弧の上端と下端に合わせます。

高さが100ptの長方形が仮想ボディの位置だと考えられます。「g」は游明朝DBですが、仮想ボディをはみ出しているのがわかります。

 

テキストボックスを挿入します。「文字列の折り返し」を「前面」にします。「塗りつぶしの色」から何か色を指定し、透明度を70%程度にします。「枠線なし」にします。

|描画ツール > 書式 > 図形のスタイル|右下のダイアログボックスをクリックして「図形の書式設定」を表示させ右側のアイコンをクリックして上下左右の余白を0ptにします。「テキストに合わせて図形のサイズを調整する」にチェックが入っていることを確認します。

先に入力した文字列をテキストボックスにコピーします。改行が入らないようにします。改行があるとテキストボックスの高さが行間隔の2倍になってしまいます。

文字の色を黒でない色にします。

 

行間隔 20pt

行間を固定値、間隔を20ptにしてみます。テキストボックスの高さが20.7ptになっていると思います。もしなっていなければ「サイズ」で高さを20.7ptにしてください。

テキストボックスを移動してテキスト入力エリアの文字とピッタリ重なるようにします。透明度を70%程度にした長方形を挿入して、下端をベースラインに合わせ、上端をテキストボックスの上端に合わせます。「サイズ」で高さを確認すると16.25ptになっています。誤差がありますが、行間隔20ptの80%程度になっています。

行間隔を10ptづつ増やしていくと長方形の高さが8ptづつ増えていきます。

 

行間隔 100pt

行間隔100ptにするとベースラインからテキストボックス上端までは80.25ptになりました。

仮想ボディは100ptなので理屈上は切れないはずですが、「永」やカギ括弧の上端は切れた状態です。日本語フォントのベースラインは仮想ボディ上端から88%程度と考えられるので8%ほど不足していると思われます。

ベースラインの位置はフォントによっても異なるので游明朝DBに限られる話ですが、日本語フォントの目安にはなると思います。

 

行間隔 108pt

行間隔を108ptにしてみると、仮想ボディ上端がギリギリ入るようになりました。

 

行間隔 150pt

行間隔を150ptにするとベースライン下側が30.45ptになります。

 

行間隔 240pt

行間隔を240ptにするとベースライン下側が48.45ptになります。
行間隔を10ptづつ増やすとベースライン下は2ptづつ増えていく結果になりました。

 

行間が固定値の行を中央揃えにしない

 

|ファイル > オプション > 詳細設定|の最下段から6行目に「行間が固定値の行を中央揃えにしない(C)」という項目があるのを見つけました。既定値ではチェックが入っていません。

既定値のままでは行の下側になるのに「中央揃え」というのは「ん?」という感じですが、どうなるかチェックを入れてみました。

 

行間隔 20pt

前と同じようにテキストボックスの行間隔を20ptから始めてみました。
既定値の場合と異なり、ベースラインから上の20ptが表示されました。

 

行間隔 100pt

行間隔を100ptにしてもベースラインから下は表示されません。

 

行間隔 110pt

行間隔を110ptにしてもベースライン下は表示されません。テキストボックスの上端からベースラインまでが広がるだけです。

 

行間隔 120pt

行間隔を120ptにするとベースラインから下側が表示されるようになりました。テキストボックス上端までが118pt、下端までが2.55ptです。

 

行間隔 150pt

行間隔を150ptにするとベースラインからテキストボックス上端までは118ptのままで、下端までが32.7ptになりました。行間隔をもっと広げても文字上部の空きは変化しません。

文字の位置が既定値の場合は行間隔の値が十分でも行の下端から一定の割合でベースラインが変化しますが、「行間が固定値の行を中央揃えにしない(C)」にチェックを入れると行の上端から一定の距離を保つようです。

テキストボックス内の文字下端が切れている場合はテキストボックスを拡げるとプリントやPDFでは問題なく表示されるようになりますが、上端が切れている場合はテキストボックスの枠外になるのでプリントされません。既定値の場合はフォントの110%程度、「行間が固定値の行を中央揃えにしない(C)」にチェックを入れると90%程度の行間隔で仮想ボディの上端が切れずにすみそうです。
あるいは1行目の先頭に改行を入れて2行目から文字を入力することで切れずにすみそうです。