質問

本文の最初の段落の最初の文字のアウトデントを実装しようとしています。私が行き詰まっているのは、段落の最初の文字と残りの文字の間の間隔を一定にすることです。

たとえば、「W」と「I」の間隔には大きな違いがあります。

'I' Outdent
'W' Outdent

違いを軽減する方法について何かアイデアを持っている人はいますか?私は純粋な CSS ソリューションを好みますが、必要に応じて JavaScript に頼ることになります。

PS:IE や Opera との互換性は必ずしも必要ありません

役に立ちましたか?

解決

これを適用すると、 p.outdent:first-letter:

margin-left: -800px;
padding-right: 460px;
float: right;

これにより、最初の文字が段落の右端に配置され、段落の幅だけ左に移動され、文字とすべてのパディングの両方がフロートの大きな負のマージンに移動され、段落が枠内に収まるようになります。マージンを持ち、ラップアラウンドしようとしません。

他のヒント

「courier new」のような固定幅フォントを使用してみましたが、文字の幅がほぼ同じなので、かなり目立たなくなりました。

編集 - このフォントはまともですが、Windows でのみ機能する可能性があります

p.outdent:first-letter {
    font-family: ms mincho;
    font-size: 8em;
    line-height: 1;
    font-weight: normal;
    float: left;
    margin: -0.1em 0 0 -.55em;
    letter-spacing: 0.05em;
}
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top