HTML CSS – How to Italicize Text Backward

csshtmlitalic

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?

Best Answer

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);
}
Related Question