7

これは私の前の質問のフォローアップ質問です。要素内のテキストの各行の正確な位置を見つける方法を見つけようとしています。

csslineHeight属性を見つけることができました（前の回答を参照）。問題は、要素の高さが行数の累積高さに。を掛けたものよりもわずかに大きいことlineHeightです。

例：

パディング、ボーダー、マージンの<p>ない2010pxの高さで（、、scrollHeightおよびoffsetHeightすべてclientHeight同じレポート）、ブラウザーに89行あります。のlineHeightはcomputedStyle()22です。

2010/22=91.37行

小さな要素では、値を床に並べて正しい行数を取得できますが、大きな要素では、正確な行数を正確に取得できないという上記の問題が発生します。

私の仮定は、私が考慮していないこれらのテキスト行の間にいくつかの小さなスペースがあるということです。それを見つける方法はありますか？フォントタイプと関係がありますか？ブラウザで自動的に設定されますか？ドキュメントは特に役に立ちます。

ありがとう！！

アップデート：

したがって、26個の上付き文字が<p>あり、それぞれが2px上に突き出ており、lineHeight表示される行の線を24pxに拡張しています。これは、私の不足しているスペースを説明しています。（うわー！これまでのところありがとう！）

私が今乗っているボートは、それらが通常のラインの最上部からどれだけ突き出ているかを動的に計算する方法、またはaのベースラインが<sup>通常のベースラインよりどれだけ高いかを発見する方法を見つける必要があると思います。（逆もまた同様です<sub>。）それ以外の場合、CSSでそれを判断できますか？

4

2 に答える 2

2

@lanzzはある程度不完全なので、私自身の答えを提供します。

ブロック要素を次のように定義する場合：

div {
 font-size: 10px;
 line-height: 10px;
 height:30px;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px;
 overflow-y: hidden;
 padding: 0px;
}

正確に3行分の十分なスペースが得られます。ただし、サブスクリプトまたはスーパースクリプトがある場合は、表示される行が少なくなります。オーバーフローを削除することで、3行のスペースのみを表示するように強制できます。

これは、http：//jsbin.com/ogoruy/4/で実証できます。

上付き文字と下付き文字は「インラインブロック要素」です。

インラインボックスの高さは、すべてのグリフとその両側のハーフリーディングを囲んでいるため、正確に「ラインの高さ」になります。

ブロックコンテナボックス内のすべてのインラインボックスに対して「line-height」の値が1つだけで、それらがすべて同じフォントである場合（および、置き換えられた要素、インラインブロック要素などがない場合）、上記は次のことを保証します。連続する行のベースラインは正確に「行の高さ」離れています。

http://www.w3.org/TR/CSS2/visudet.html#line-height

于 2012-09-26T18:58:26.200 に答える
1

このデモに示すように、上付き文字と下付き文字は通常、線の境界の上と下に突き出ています。左の例では、同じであっても、右の例よりも線の間に明らかなスペースがあることがわかりますline-height。残念ながら、ブラウザの「タイポグラフィ」（それと呼べる場合）では、サブ/スーパースクリプトがどれだけ突き出ているかを判断できないため、実際の行の高さを計算するときにそれを考慮に入れることはできません。

于 2012-09-26T18:35:22.013 に答える