Wie kursiv Text rückwärts geschrieben?

Question

Ich möchte den Text rückwärts kursiv oder den umgekehrten Weg dieses aktuellen Textes links. Ist dies in HTML/CSS oder sogar mit Javascript/jQuery möglich?

Answer 1

ich denke, das sein könnte, was Sie suchen? jsFiddle
Spielen Sie mit dem Code ein bisschen. Ansonsten ist es ziemlich sicher, dass es unmöglich ist. Sie können dies in der Bildbearbeitungssoftware, wie Paint Shop usw.

#skewed { 
font: 21px Impact, sans-serif; 
text-align: center; 
background: #ccc 
} 
#skewed { 
width:    350px; 
height:   140px; 

-moz-transform: skew(-5deg, -5deg); 
-o-transform:  skew(-5deg, -5deg); 
-webkit-transform: skew(-5deg, -5deg); 
transform:   skew(-5deg, -5deg); 
} 

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div> 

<!--[if IE]> 
<style> 
/* 
* The following two rules are for IE only and 
* should be wrapped in conditional comments. 
* The -ms-filter rule should be on one line 
* and always *before* the filter rule if 
* used in the same rule. 
*/ 

#skewed { 

    /* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
SizingMethod='auto expand')"; 

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
     M11=1, 
     M12=-0.08748866352592455, 
     M21=-0.08748866352592455, 
     M22=1, 
     SizingMethod='auto expand'); 


/* 
* To make the transform-origin be the middle of 
* the object. Note: These numbers 
* are approximations. For more accurate results, 
* use Internet Explorer with this tool. 
*/ 
    margin-left: -9px; 
    margin-top: -18px; 

} 
</style> 
<![endif]-->​  

Answer 2

Sie können den Text möglicherweise drehen.

http://snook.ca/archives/html_and_css/css-text-rotation

scheint schwierig, aber Sie werden wahrscheinlich, dies zu tun haben, auf einer Pro-Zeichenbasis. Nicht ganz der beabsichtigte Schiefereffekt, aber nahe dran.

Answer 3

Ich denke, der einzige Weg wäre die Verwendung einer speziellen Schriftart, die nach hinten geneigt ist.

Answer 4

Ihre einzige echte Option, die ich glaube, wäre zu finden (oder erstellen) eine Schriftart, die rückwärts kursive Buchstabenformen hat und es in Ihre Webseite über eine benutzerdefinierte @font-face einbetten.

, die für Sie eine von vielen Online-font-face-Generatoren verwenden können, wie FontSquirrel

Answer 5

I jos' Demo aktualisiert jQuery zu verwenden jeden Buchstaben in einer Spanne zu wickeln, dann jeden Buchstaben verwandeln am Beispiel von Mozilla's transform docs & ein demo:

HTML

<div id="skewed"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. 
    Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a 
    malesuada erat. 
</div> 

jQuery

// html function requires jQuery 1.4+ 
$('#skewed').html(function (i, h) { 
    h = h.replace(/\s+/g, '\u00a0').split(''); 
    return '<span>' + h.join('</span><span>') + '</span>'; 
}); 

CSS

#skewed { 
    font: 24px Georgia, sans-serif; 
    background: #ccc; 
    padding: 10px 20px; 
} 
#skewed span { 
    display: inline-block; 
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */ 
    -webkit-transform: skewx(20deg); 
      -o-transform: skewx(20deg); 
      transform: skewx(20deg); 
} 

Answer 6

Use and embed auf Ihre Webseite eine linksgerichtete kursiv kompatibel Schriftart, wie this one. Es gibt kostenlose Alternativen here.