arabic italic font

Question

font-style:italic; tilts the font to the right just like this: my font

In Arabic, the writing is done from right-to-left, not left-to-right. Wh

Answer 1

You can use something called skew in the CSS transformation declaration:

.fontToTransform {
    font-size: 40px;
    transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
}

This will get you out of the hassle of actually manipulating the font itself. This will transform the whole block your text is in tho. You might need some kind of validation to check each line-break and separate them to be new tags each time. So as this might not be a real solution, you might take it into consideration if you want to shear shorter (single-line) text.

Edit

This is veeeery far fetched but here's a dirty example that finds out the individual lines in your text block and puts each of them in a new span, what will cause each line to be separately styled with the skewX styling. Here you go:

CSS

#fontTransform {
    font-size: 40px;
    margin-right: 30px;
    text-align: right;
}

#fontTransform span {
    display: block;
    transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
}

HTML

    
    
    
    
    


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

main.js

'use strict';
$(document).ready(function(){
    var d = document.getElementById('fontTransform');
    var t = d.innerHTML;
    var w = t.split(' ');

    var lines = [];

    d.innerHTML = w[0];
    var height = d.clientHeight;

    var tmp_line = [];

    for (var i = 0; i < w.length; i++) {
        d.innerHTML = d.innerHTML + ' ' + w[i];

        tmp_line[tmp_line.length] = w[i];

        if (d.clientHeight > height) {
            height = d.clientHeight;
            console.log(w[i-1]);

            delete tmp_line[tmp_line.length-1];
            lines[lines.length] = tmp_line;
            tmp_line = [];
        }
    }

    // Destroy d.innerHTML
    d.innerHTML = '';
    var tmp_html = '';

    // Refill the lines within spans
    for (var i = 0; i < lines.length-1; i++) {
        tmp_html = '';
        for (var x = 0; x < lines[i].length-1; x++) {
            tmp_html = tmp_html + lines[i][x] + ' ';
        }
        tmp_html = tmp_html.trim();
        tmp_html = tmp_html + '';

        d.innerHTML = d.innerHTML + tmp_html;
    }
});

You might consider using jQuery's resize() binding to update the blocks of text that have percentile widths. Also I'm not sure what happens with very long words that won't fit in one line. Not that this might actually happen, but keep in mind it's not tested and might cause words to get lost. Really need to do more testing for actual publishing.