Hanging Punctuation im HTML/CSS

Gibt es eine gute Möglichkeit, Hanging Punctuation in HTML/CSS heute zu tun, da die Browser die hanging-punctuation Eigenschaft nicht implementiert haben?Hanging Punctuation im HTML/CSS

Update: Eine JavaScript-Lösung wäre nett, da es mir ermöglicht, mein HTML neben der Zeile, die auf das Skript verweist, nicht zu berühren.

so etwas wie 1) gehen durch alle p, span, und blockquote. Wenn sie mit ", ... oder etwas beginnen, passen Sie den Abstand an. Aber ich weiß nicht, wie ich herausfinden soll, wie viel ich den Abstand ändern kann und wie ich mit etwas anderem als dem ersten Zeichen des ersten umgehen soll in einem Element Linie

var elements = document.querySelectorAll('p, span, blockquote'); 
console.log(elements); 
var i = 0; 
while (i < elements.length) { 
    var el = elements[i]; 
    if (el.firstChild.nodeValue && el.firstChild.nodeValue.match(/^[".,']/)) { 
    el.style.position = 'relative'; 
    el.style.left = '-.4em'; 
    } 
    i += 1; 
}

-Code ist ein work in progress ...

Quelle

2015-01-12 Costa

Es gibt verschiedene Tricks wie negative Margen und relative Positionierung, die Sie in speziellen verwenden könnten Fälle, in einer ungeschickten Weise. Wie gesagt, die Frage ist zu weit gefasst. Außerdem wurde die Eigenschaft noch nicht definiert *; es wurde gerade in Entwürfen vorgeschlagen (und markiert als Gefahr der Entfernung). Sie sollten genau angeben, was Sie im Einzelfall benötigen würden, und Ihren besten Versuch zeigen. –

Ich habe auf eine Javascript-Lösung gehofft, einfach weil ich nicht ändern kann, wie ich meinen HTML strukturiere. Etwas, das ich austippe '' 'und es endet am linken Rand einer Zeile. – Costa

Sie könnten auch gefälschte es mit :before und :after:

p { 
 
    margin-left: 1em; 
 
    background-color: #eee; 
 
} 
 

 
p:before { 
 
    content: '"'; 
 
    position: absolute; 
 
    margin-left: -.4em; 
 
} 
 

 
p:after { 
 
    content: '"'; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo semper nulla at consectetur. Quisque at aliquam turpis, eu rhoncus dolor. Aliquam quis aliquam ante. Suspendisse tempus, erat eget scelerisque rhoncus, lacus eros luctus ante, a consequat quam tortor a quam. Suspendisse congue, ipsum sit amet venenatis ornare, ligula tortor fermentum est, et aliquet augue nisl id leo. Suspendisse gravida nisl in arcu condimentum gravida. Maecenas aliquam nisi nec congue viverra. Duis at lacinia justo.</p>

Edit:

Es wurde, dass die negative wies darauf hin, Marge ist -.4em weil th at entspricht der Breite eines Anführungszeichens in der gegebenen Schriftart, da es sich um eine Schriftart mit variabler Breite handelt.

könnte eine nicht-font-spezifische Lösung, die Artikel 1em breit zu machen, dann den Text rechts ausrichten:

p:before { 
    content: '"'; 
    position: absolute; 
    margin-left: -1em; 
    width: 1em; 
    text-align: right; 
}

Quelle

2015-01-12 23:29:13 CodingWithSpike

Schöne Lösung! Könnten Sie eine Hintergrundfarbe hinzufügen, damit wir sehen können der hängenden Einzug? –

@mheiber eine BG-Farbe für Sie hinzugefügt. Danke für den Vorschlag. – CodingWithSpike

Ist es immer .4em? Oder hängt es von der Schriftart? – Costa

Sie einen negativen text-indent verwenden können.

blockquote p { 
 
    text-indent: -.4em; 
 
    background-color: #faebbc; 
 
}

<p>There's a block quote on the next line:</p> 
 
<blockquote><p>"I have negative text indent."</p></blockquote>

(Spitze von http://css-tricks.com/almanac/properties/h/hanging-punctuation/ angepasst)

Quelle

2015-01-12 23:25:25

Dies ist nur gut für die erste Zeile in einem Textkörper, richtig? – Costa

Antwort

Verwandte Themen