CSS＆タイポグラフィ：数字の均一な垂直アライメント

StackOverflow https://stackoverflow.com/questions/3054857

質問

次のスクリーンショットをご覧ください。http://www.jesserosenfield.com/beta/descenders.png

私の問題は、下降（スクリーンショットの「7」のような）数字は、スパンの下部と垂直に整列しているのに対し、他の数字は中央に向かって垂直に整列していることです。 Ascender / Descenderに関係なく、すべての数値の垂直方向のアライメントを「均等化」する方法はありますか？

ありがとう！

コード：

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

およびCSS

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}
役に立ちましたか？

解決

別のフォントを使用します。 Arialは、数字のすべての底を同じベースラインに置きます。 Microsoft Sans Serifも同様です。 Trebuchetもそうです。ですから、そのことについては、新しいローマの時代を行います。

実際、数字には、書体に応じて異なるアセンダーとディセンダーがあります。タイポグラファーがすることは、彼らが見栄えが良いと思うものに基づいて、数の「身体」を中心にし、そこから上下に行くことです。通常、その変動はセリフの顔にありますが、常にではありません。いずれにせよ、制御することはできません。ところで、3、4、5、7、および9は通常、ディセンダーを持っているものであり、6と8には通常アセンダーがあります。

他のヒント

それがうまくいくかどうかはわかりませんが、私が試してみることの1つは次のとおりです。

日と月を出力するPHP関数があるようです。数字を出力するだけでなく、各数値を適切に位置/スタイルするスパンにラップしてみませんか。

CSS＆PHPの大まかなスケッチ：

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

フォントを備えた純粋なCSS/HTMLソリューションの必要性があることを理解していますが、本当に必死であれば、個別の画像を使用して数字を表示してみてください。 PHP機能も同様の方法で機能する必要があります。

echo '<img src="/img/' . $num . '.png" />';

繰り返しになりますが、私が試してみようとすることは、彼らが働くかどうかは確かではありません。

ジョージアは持っています 古いスタイルのフィギュア. 。本当にライニングの数値が必要な場合は、このオプションがあるジョージアのオペンタイプバージョンがあるかどうかを確認する必要があります。

とはいえ、あなたが示す文脈で古いスタイルの数字を使用する際に問題はありません。常にすべてをどこにでも並べる必要はありません:)
上下に合理的なスペースがあるように、間隔を設定するだけです。

ここの問題は関係しています 比例対表の図.

CSSを使用して、この動作を防ぐことができます font-feature-settings のルール tnum 財産：

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

制御できるのは、親の中のテキストベースラインの垂直アライメントです。ただし、テキストのベースラインに関して、さまざまな文字の概要の特定のフォント位置を制御することはできません。

@robustoが言ったように、1つの解決策は、使用しているフォントを変更して、すべての数字がベースラインで終わるようにすることです。ジョージアは数字に特に悪いです。なぜなら、いくつかの数字（たとえば36または84）は、1つの数字がascenderを持ち、他の数字が破壊されているために奇妙に見えるからです。 （もちろん5月36日について心配する必要がないというわけではありません:-)）

もう1つの解決策は、ジョージアフォントにとどまることですが、3、4、5、7、9の脱気が顕著ではないように垂直パディングを増やすことです。あなたの場合、数の下と上に4〜5pxを追加する必要があります。もちろん、それは日付フラグの全体的なサイズを増加させますが、それは望まれないかもしれません。

垂直パディングを増やす代わりに、フォントサイズのカップルのピクセルを微調整することで、アセンダーとディセンダーが目立つようになります。これは、ユーザーのブラウザズームが100％と通常のDPIに設定されている場合にのみ機能します。ズームが120％である場合、またはユーザーが高DPIを使用している場合、フォントの視覚サイズが増加し、アセンダー/ディセンダーがより顕著になります。

より一般的に利用可能な同様のフォントの数値を使用するだけで検討することをお勧めします。たとえば、新しいローマンの時代はそれほど違いはなく、時代の数字とジョージアの数字を混ぜることはそれほど悪くはありません。

これが例です：enter image description here

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top