14

Helveticaでレンダリングされるテキストの垂直位置とそのコンテンツ領域のサイズは、FirefoxとChromeforMacで異なります。たとえば、Chromeでは、行の高さがフォントのサイズと同じである場合、子孫はクリップされます。

ブラウザ間で垂直方向の文字位置を変えるデモンストレーション

(サイズとテキストの位置の違いを示すために、この画像のブロック要素の位置を調整し、ベースラインの一貫性を維持しています)。Macをお持ちの場合は、このJSビンで私が話していることを確認できます。

今、私はこの特定の不一致を修正する方法に直接興味がありません。違いを排除またはペーパーオーバーしようとする手動で調整されたリセットスタイルシートがあることはわかっていますが、そもそもこれらのブラウザーのレンダリングが異なる原因となった要因に特に関心があります。

私はここでいくつかの仮定をしています:

  • フォントのレンダリングと、標準ボックスモデル内のグリフのサイズ設定と配置の両方に標準が存在しますが、それらがどのように相互作用するかについては指定されていない場合があります。

  • 前述の標準のブラウザメーカーの解釈にはバグが存在し、テキストのサイズ、配置、およびレンダリング方法に影響を与える可能性があります。

  • これらの特定のブラウザの場合、設計に関する議論と実際の実装の多くは、何らかの形で公開されています。したがって、どこを見ればよいかがわかれば、そのような不一致の原因を知ることができます。

  • 両方のブラウザは同じ場所で起動します-マークアップ、スタイル、フォント定義はそれらの間で一貫しています。ある時点で、これらを使用して最終出力を生成する方法が異なります。

したがって、私の具体的な質問は、プロセスのどこでこの発散が発生し、が原因で発生するのかということです。

この知識を身につければ、そのような不一致を修正する方法をよりよく理解できると思います。特にこの場合と、将来遭遇する可能性のある同様の状況の両方。

4

2 に答える 2

4

残念ながら、re:フォントに基づいたコンテンツ領域のレンダリング、CSS2.1はほとんど何も言いません

コンテンツ領域の高さはフォントに基づく必要がありますが、この仕様ではその方法は指定されていません。UAは、たとえば、em-boxまたはフォントの最大のアセンダーとディセンダーを使用できます。(後者は、em-boxの上または下の部分を持つグリフがコンテンツ領域内にあることを保証しますが、フォントごとに異なるサイズのボックスにつながります。前者は、作成者が「行の高さ」に対して背景のスタイルを制御できることを保証します。 、ただし、コンテンツ領域の外側にグリフがペイントされることになります。)

言い換えれば、植字、およびラインボックスのコンテンツ領域を正確に描画および配置する方法は、少なくともCSS2.1ではブラウザ独自の実装に任されています。ただし、これは将来の仕様でより適切に定義される可能性があります(個別のモジュール1でない場合は、 Fontsモジュールの可能性があります)。

セクション10.8.1には、プロパティがインラインで流れるテキストの周囲のコンテンツ領域のレンダリングにどのようにline-height影響するかについての詳細が含まれていますが、これもコンテンツ領域自体の高さに依存します。これは、前述のようにCSS2.1では定義されていません。

;autoの有効な値ではないことに注意してください。line-heightおそらく、を使用するつもりnormalでした。これは、ちなみにその初期値でもあります(ただし、必ずしもブラウザのデフォルトである必要はありません)。また、これは仕様が値について述べていることですnormal

normal
要素のフォントに基づいて、使用される値を「妥当な」値に設定するようにユーザーエージェントに指示します。値は。と同じ意味です。'normal'の使用値は1.0から1.2の間をお勧めします。計算値は「通常」です。

ご覧のとおり、「通常の」行の高さを構成するものはブラウザによっても決定されるため、line-height: normaland line-height: 1(または1emまたは)の比較に関しても、先に進むことはあまりありません。100%ただし、ChromeとFirefoxは、通常の線の高さを使用するように求められたときに、グリフを適切な境界内に維持するのに適しているようです。

ちなみに、Chromeは子孫をクリップしません。コンテンツボックスの外側にレンダリングされますが、を設定しない限り、ボックスの境界にクリップされないようにする必要がありますoverflow: hidden


1 プロパティのCSS3定義は現在このモジュールにありますが、それが長い間放棄されているか、少なくとも書き換えが保留されていることはすぐにわかります。現在の状態のモジュールは非常に詳細ですが、ブラウザベンダーとワーキンググループの両方からほとんど無視されていると言えば十分です。line-height

于 2013-02-01T22:57:14.043 に答える
-1
  • '行の高さは自動です'=>ブラウザが選択できます。
  • '行の高さ=フォントサイズ'=>ユーザーエラー:テキストは判読できなくなります。また、ブラウザが調整を行うことは合理的であり、実際に不可欠です。

リーディングを使用する必要があります。たとえば、本は12ptの行間隔で10ptに設定できます。

于 2013-02-01T23:27:40.273 に答える