2016-04-12 8 views
3

Ich habe versucht, den Titel so gut wie möglich zu schreiben, aber ich bin mir nicht sicher, wie ich genau beschreiben soll, was hier passiert, also fühlen Sie sich frei, es zu korrigieren.Warum ist das> Rechtwinklige Zitat (& rdquo;) nicht vertikal ausgerichtet?

Ich wollte den> rechten Winkel Zitat (& rsquo;) anstelle der> rechten Winkel Zitat (>), und während die & rdquo; Zeichen ist kürzer als die > es befindet sich am Ende der Zeile, ähnlich einem Punkt (.). Dies macht es schwierig, das Zeichen vertikal auszurichten, und wenn ich es auf 42px einstelle, fällt es auf.

Gibt es noch ein anderes Zeichen, das ich verwenden kann oder wie ich das vertikal ausrichten kann? Es könnte möglicherweise meine Schriftart sein, aber ich verwende nichts Besonderes.

Beispiel für die zwei Zeichen sind unten. Die erste ist die > reguläre rechtwinklige Klammer und die zweite ist die & rdquo; rechtwinklige Halterung, die an der Unterseite sitzt.

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

+6

Ich bin mir absolut sicher, dass die Ausrichtung von Zeichen ganz davon abhängt, wie die Schriftart die Glyphe definiert. Deshalb ist es nicht vertikal ausgerichtet. – amphetamachine

+0

Danke; Es sieht so aus, als ob das der einzige Grund ist, warum es so aussieht. Ich werde nach anderen Möglichkeiten suchen, wie man es vertikal ausrichten kann, indem man es einfach höher positioniert oder eine andere Schriftart verwendet. – Alesana

Antwort

2

Versuchen Sie, die Zeichen in einem span Isolieren und CSS-Eigenschaften und line-heightfont-size auf vertikale ausrichten verwenden.

Auch Standardschriftarten wie: Arial, Verdana usw. sind standardmäßig korrekt vertikal ausgerichtet.

See example

+0

Ich habe mit dem isolierten Zeichen mit der Zeilenhöhe gespielt, konnte es aber nicht zum Laufen bringen. In Arial (selbst in deinem Beispiel) sitzt der Charakter immer noch unten, in Verdana ist er mehr vertikal ausgerichtet, aber auch schärfer, als ich es möchte. Ich denke, ich werde versuchen, eine Schriftart zu finden, die es so anzeigt, wie es am besten ist. – Alesana

+0

(Entschuldigung für die Verzögerung) siehe aktuelles Beispiel. – Oriol

+1

Derselbe Effekt wie im Beispiel könnte auch einfach mit einem padding-bottom :-(x) px; repliziert werden, da das Einstellen der Zeilenhöhe kleiner als die Schriftart nur dazu führt, dass sie vertikal ausgerichtet aussieht. Ich wollte das vermeiden, weshalb ich gefragt habe, warum es nicht vertikal ausgerichtet ist, wenn ich sehen könnte, ob ich den Charakter wirklich vertikal ausrichten könnte, anstatt ihn zu tricksen. Die wirkliche Antwort auf meine Frage ist einfach, dass in der Schriftart Arial die & rsquo; Das Symbol ist nicht vertikal ausgerichtet. Amphetamachine hat die richtige Antwort auf meine Frage in den Kommentaren gegeben, aber leider kann ich seine Antwort nicht akzeptieren, da es ein Kommentar ist. – Alesana

0

Wie amphetamachine bereits beantwortet, das hängt davon ab, wie die bestimmte Schriftart Sie verwenden die Glyphe definiert.

Die beste Methode, die ich gefunden habe, um dies zu beheben (ohne einen hartcodierten Pixel-Offset) ist, das Zeichen in einen eigenen Bereich zu setzen und dann anzuwenden: vertical-align: PERCENTAGE%. (In meinem Fall vertical-align: 11% hat gut funktioniert, aber es hängt von der Schriftart ab).

Wenn Sie dies als Prozentsatz angeben, bleibt die Position auch bei unterschiedlichen Schriftgrößen erhalten.