隣接する文字の上部に文字を調整します

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

  •  21-09-2019
  •  | 
  •  

質問

HTMLのキャラクターを隣のキャラクターの上部に合わせたいと思います。 CSSの垂直アライグ属性は私が望むもののようですが、私はいくつかの問題を抱えています。

使用 vertical-align: text-top 私がやりたいことをしていないようですが、スペックを読むことからすべきだと思いました。

現在、私は使用しています vertical-align: 10% これは合理的な解決策ですが、各プラットフォームの適切な数値を計算して正しく見えるようにする必要があります。ブラウザは、おそらく正しいと思うものに値を設定するために検出することは、間違った解決策のように思えます。

役に立ちましたか？

解決

醜いですが、テーブルセルを使用できます。

最初にいくつかのスタイルを定義します：

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

次に、HTML：

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

他のヒント

試してみてください <sup> 鬼ごっこ。それはあなたがやろうとしていることを断言するためのものです。実装した後、CSSでさらに制御できます。

例： M<sup>c</sup>Phe Yeilds mcphe

http://www.w3schools.com/tags/tag_sup.asp

「C」が小さすぎる場合は、 <style> sup { font-size: 9pt } </style> またはそのようなもの。

質問に対するアンソニーのコメントは、意味的に正しい「C」を包むというアイデアを与えてくれました <sup> タグ（または私はあなたが引き続き使用できると思います <span>）次に、CSSを使用します text-transform: uppercase; その上。

これらのアイデアのいくつかは正しい軌道に乗っていますが、まったく機能するものはありません。私はジョシュ・ストドラの使用の提案を組み合わせることになりました text-transform: uppercase; テーブルを使用しても、小型のフォントで大文字を使用して擬似スマルキャップを使用するというKeltexの提案があります。

それはまだフォントサイズとラインの高さでフューチングに依存していますが、少なくともこの方法でより一貫した効果を得ることができます。

使用する提案 <sup> とにかくすべてのスタイルをオーバーライドする必要があるので、それはそれが違いはありません。 <span>. 。意味的には違いがあるかもしれませんが、それが問題ではないほど小さいです。

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