HTML/CSS'de Noktalama Noktalama Nasıl Yapılır

Question

Tarayıcılar, hanging-punctuation özelliğini uygulamamış olduğundan, günümüzde HTML/CSS'de Asılı Noktalama Yapmanın iyi bir yolu var mı?

Güncelleme: Bir JavaScript çözümü güzel olurdu, çünkü betiğe başvuran bir satırın yanı sıra html'mize dokunmama izin veriyor.

gibi bir şey, 1) tüm p, span ve blockquote üzerinden gidin. Eğer ", ..., ya da bir şeyle başlarlarsa, boşlukları ayarlayınız. Ancak, mesafeyi ne kadar değiştireceğimizi ve ilkinin ilk karakterinden başka bir şeyle nasıl başa çıkılacağını nasıl bileceğimizi anlayamıyorum. bir elemanın satır

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; 
} 

Kod devam eden bir çalışmadır ...

Answer 1

Bunu :before ve :after kullanarak sahte da olabilir:

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>

---

Düzenleme: Negatif işaret edildi

marj, -.4em çünkü Değişken genişlikli bir yazı olduğu için, verilen yazı tipindeki bir alıntı karakterinin genişliği hakkında olur.

olmayan bir yazı özgü çözelti daha sonra, 1em geniş öğeyi yapmak sağa metni hizalama olabilir:

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

Answer 2

Benden olumsuz metin girinti kullanabilirsiniz.

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>

(http://css-tricks.com/almanac/properties/h/hanging-punctuation/ uyarlanan ucu)