Umgekehrten Text über Browser hinweg

Question

Ich habe versucht, ein einzelnes Zeichen in einer Textzeile mit CSS anstelle eines Bildes zu invertieren, aber jedes Mal, wenn ich die CSS richtig und inline in einem Browser arbeiten, ist der Brief in der Regel 1/2px out of line in anderen (das gilt für Firedfox 45, Edge und Chrome).

Bisher habe ich

bekam

<style> 
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif); 
    * {font-family:"droid serif"} 
    div {position:relative; float:left; display:inline-block } 
    div h1 { margin:0; font-size:3em; position:relative; } 
    div h1.invert { float:left; transform: scale(-1,-1); 
    /* Also tried 
    div h1.invert { float:left; transform:rotate(180deg);} 
    */ 
</style> 

<div> 
    <div> 
    <h1>THI</h1> 
    </div> 
    <div> 
    <h1 class="invert">S</h1> 
    </div> 
</div> 

Obligatorische Geige .... https://jsfiddle.net/1q9jbuf8/

Answer 1

Das Problem hier ist nicht der eigentliche Brief, aber der Abstand in der Schriftart. Sie können dies überprüfen, indem Sie $('.invert')[0].getClientRects()[0] verwenden und dann Ihre Transformation anwenden und erneut prüfen. Wenn überhaupt, ändert sich nur die horizontale Position.

Ich sehe keine Möglichkeit, dies zu lösen, ohne den Text auf einer Leinwand zu zeichnen, das tatsächliche Rechteck mit Pixeln zu bestimmen und dann nur das zu drehen. Vielleicht hat jemand anderes hat eine bessere Lösung, aber die einzige vernünftige eine einzelne Fixes für Schriften sein sollte und Größen, die Sie (wie das Hinzufügen von position:relative; top: 1px;) steuern kann

ich um für eine Weile mit ihm gespielt: https://jsfiddle.net/v06j5hz0/6/

Da ich vereinfachte das umgekehrte Modell (BTW: invertiert bedeutet rotateX, nicht rotieren) und ich zeige die tatsächlichen Rechteckgrößen, Positionen und so weiter an. Leider habe ich außer der Kenntnis der tatsächlichen Schriftart und Größe und der Aktualisierung des transform-origin Punktes keine Lösung.