问题
I would like to italicize text backwards or the left the opposite way of this current text. Is this possible to do in HTML/CSS or even with Javascript/jQuery?
回答1:
I think this might be what you're looking for? jsFiddle
Play with the code a bit. Otherwise pretty sure it's impossible. You CAN do this in image editing software, such as Paintshop, etc.
#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]-->
回答2:
I updated jos' demo to use jQuery to wrap each letter in a span, then transform each letter using the example from Mozilla's transform docs & a 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);
}
回答3:
You might be able to rotate the text.
http://snook.ca/archives/html_and_css/css-text-rotation
Seems difficult, but you will probably have to do this on a per-character basis. Not quite the intended skewing effect, but is close.
回答4:
I think the only way would be to using a special font that is tilted backwards.
回答5:
Your only real option I believe would be to find (or create) a font that has backward italic letterforms and embed it into your webpage via a custom @font-face
.
For that you can use one of many online font-face generators, such as FontSquirrel
回答6:
Use and embed into your website a left-leaning italic compatible font, like this one. There are free alternatives here.
来源:https://stackoverflow.com/questions/11976193/how-to-italicize-text-backward