Geek Answers Handbook

Arabic italics

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

In Arabic, recording is from right to left, not left to right. What I'm trying to achieve is in italics, so that it tilts to the left, not the right. Any suggestions? You do not need to include Arabic letters in your answer. I want the opposite of font-style:italic; in any language.

enter image description here

+7
source share
6 answers

You can use something called skew in the CSS transform 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 save you the hassle of actually manipulating the font. This will turn the entire block into your text. You may need some kind of check to check each line break and split them into new tags every time. Since this may not be a real solution, you can take this into account if you want to cut a shorter (single-line) text.

Edit

This veeeery is far away, but here is a dirty example that detects individual lines in your text block and puts each of them in a new span , which will lead to the fact that each line will be separately decorated with the skewX style. Here you are:

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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <script src="jquery.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body> <p id="fontTransform">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.</p> </body> </html>

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 = '<span>'; 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 + '</span>'; d.innerHTML = d.innerHTML + tmp_html; } });

You can use jQuery resize() binding to update blocks of text with percentile width. Also I'm not sure what happens with very long words that won't fit on one line. Not that this could actually happen, but keep in mind that this is unverified and can cause words to get lost. In fact, you need to do more tests for the actual publication.

+5
source

As another RTL user, I feel your pain :)

How to use arabic webfont and import it into your CSS? Amiri is an open web font that has the correct text overlay for the Arabic naskh script. It was even hosted on Google CDN!

Then you can simply do:

 @import url(http://fonts.googleapis.com/earlyaccess/amiri.css); .myItalic{ font-family: 'Amiri', serif; font-style: italic; }

Here is a working JSFiddle example

If you don't like this font, you can use other other web fonts. Here are some of them for testing. If they do not work for you - I think you can find a font that you like, change its italic version and paste it on your page in the same way.

+3
source

Agreed with Allendar (top)

It can be easily done in CSS3. No JavaScript needed ... at all.

Here is your answer:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .skewTheFont { transform: skewX(10deg); -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); font-size: 60px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } </style> <!-- Style ends here --> </head> <body> <p class="skewTheFont">Arabic Font</p> </body> </html>

However, this is supported in FF, IE10 and Chrome (not for <IE10)

+3
source

Unfortunately, there is no way to do this using the font-style property. See the page here: http://www.w3schools.com/cssref/pr_font_font-style.asp . I'm not sure if there are Arabic fonts that can be italicized in the opposite direction. If they are, they are probably not widely supported.

0
source

The dir=rtl only affects the direction of the layout. It does not change the direction of the text - in your example, you still see "some kind of italic code", not "edoc cilati emos" - and it does not reflect each character from left to right.

Italic variants of Arabic fonts, where they exist, will often tilt left rather than right. (This is sometimes called the "Iranian" option.) This is not a behavior that you can control in CSS, although it is a decision made by the font designer, not the browser.

-2
source

Honey, there are two things that I used to cut the wajbah project. Use the rtl direction in code like:

 dir="rtl"

after that the content you want to show on the right side, use float right .

He will fulfill your problem.

Try and answer it.

-2
source

More articles:


All Articles