2016-04-12 2 views
3

できるだけタイトルを書こうとしましたが、ここで何が起こっているのかを正確に表現する方法がわからないので、自由に修正してください。>直角引用符(›)が縦に並べられていないのはなぜですか?

>直角引用符(>)の代わりに>直角引用符(›)を使用したかったので、›行の末尾にある>よりも短く、ピリオド(。)に似ています。これは文字を縦に並べるのが難しく、42pxに設定すると目立ちます。

他の文字を使用できますか、これを縦に並べることはできますか?それはおそらく私のフォントかもしれませんが、私は特別なものを使用していません。

2文字の例を以下に示します。最初のものは>通常の直角括弧で、2番目は›下に座っている直角ブラケット。

> character - vertically aligned › character - sitting on the bottom

+6

文字の配置は、フォントがグリフを定義する方法に完全に依存することが絶対に確実です。そのため、垂直方向に配置されていません。 – amphetamachine

+0

ありがとうございます。そのように見えるのはそれが唯一の理由だと思われます。単にそれをより高い位置に置くか、別のフォントを使用するなど、垂直方向に整列させる他の方法を検討します。 – Alesana

答えて

2

spanに文字を隔離してみて、垂直整列にそれをCSSプロパティline-heightfont-sizeを使用しています。

また、arial、verdanaなどの標準フォントもあります。デフォルトでは適切に垂直方向に整列されています。すでに答えamphetamachineとして

See example

+0

私はラインハイトを使って孤立したキャラクターで遊んだことがありますが、動作させることはできませんでした。 Arialでは(たとえあなたの例でも)、キャラクターはまだ下に座っていますが、verdanaではそれは垂直に並んでいますが、私が望むよりもシャープです。私はそれが最良の方法でそれを表示するフォントを見つけることを試みると思う。 – Alesana

+0

(遅れて申し訳ありません)更新された例を参照してください。 – Oriol

+1

例と同じ効果は、padding-bottom :-(x)pxを使用するだけで複製することもできます。これは、フォントよりも線の高さを小さく設定すると、縦に並べて表示されるからです。私はそれを避けたかったのですが、なぜそれが縦に並んでいないのか尋ねました。文字を真似するのではなく、真に縦に並べることができるかどうかを見ていました。本当に私の質問への答えは、Arialフォントの›シンボルは垂直に配置されていません。アンフェタミンは私の質問に正解を記していますが、残念ながら私は彼の答えをコメントとして受け入れることができません。 – Alesana

0

が、これはあなたが使用している特定のフォントがグリフを定義する方法によって異なります。

これを修正するには、ハードコードされたピクセルオフセットを使用しないでください。文字を別のスパンに配置してから適用してください。vertical-align:PERCENTAGE% (私の場合は縦に整列しています:11%はうまく機能しましたが、フォントに依存します)。

パーセントで表すと、フォントサイズが異なる場合でも同じ位置を保持します。

関連する問題