homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

[Q] Different CSS based on letters
I have both English & Arabic letters in same sentence

 9:23 pm on May 11, 2013 (gmt 0)

In my current project when publishing articles I have both Arabic & English letters within the same sentence. The problem is the standard Arabic font can't display the English letters correctly as the font is designed for Arabic letters. Is there any way to filter out the English ones and assign them another class with another font using css?

Appreciate any other ideas.



 11:25 pm on May 11, 2013 (gmt 0)

Whoa there. Backtrack. What do you mean "the standard Arabic font"? You're not using a
:: shudder ::
legacy font in this day and age are you? For something as common as Arabic?! Otherwise there would be no earthly reason why a text can't display both English and Arabic at the same time. Some elderly Windows browsers may insist on wrapping every bit of Arabic in <dir="rtl"> markup. Don't quote me: I kinda think I'm conflating html and css. Or vice versa if the primary language is Arabic, with English exceptions.

Uhm. What was the question again?

If every bit of your text includes <lang> markup, you should be able to do everything you need in CSS alone; the :lang pseudo-class goes back to CSS2. Otherwise you may need to go to javascript. Run a regular expression to detect the character range, and tweak the stylesheet accordingly. Cursory lookup suggests that javascript doesn't do any form of \p{blahblah} --no two dialects are exactly the same-- so you'd need something more narrowly focused using \u{numbers-here} to look at initial letters.


 11:35 pm on May 11, 2013 (gmt 0)

How is your text encoded ?
I'd assume you can get rid of your troubles much easier by using UTF-8 (or UTF-16 should you be so inclined - actually UTF-16 might be easier on you).


 12:04 am on May 12, 2013 (gmt 0)

utf-16 for Arabic? That seems like overkill, unless maybe you're looking at a particular style of database.

Even if you're using a one-byte encoding (ISO 8859-6 or similar), that should have no effect on the browser's font choice.


 12:40 am on May 12, 2013 (gmt 0)

Using utf-8 as input/output encoding.

Well I can't hard code classes or spans when ever letter changes.

The font I'm using (have to use) is a custom (@font-face) utf-8 font and includes all Arabic & English charcters, the English/Latin ones displays poorly, not as bold as the Arabic there for I need to use a better suited font for the English letters as I CAN'T replace the Arabic font I'm using.

Another solution of course is to edit the font from the ground and redesign the English letters.

The solution I'm looking for should be some thing that doesn't effect the page load time, as it's priority #1 for the project.

The solution doesn't need to be only CSS depended.


 1:07 am on May 12, 2013 (gmt 0)

This is all happening in UTF-8?

In that case, the obvious solution is to not say anything about fonts at all, and let the end user's browser deal with it. Why do you "have to" use a substandard custom font? What's the part you're not telling us?

I can't hard code classes or spans when ever letter changes.

You don't have to. If it's hand-rolled html, do a single RegEx global replace after the fact, covering the whole document. I do this all the time when preparing e-books that contain snippets of quoted Greek.

Or, if the content passes through php, let it do the work.

Besides, search engines are happier when different languages come in different tags. Especially when you're dealing with scripts like Latin or Arabic that are each used for multiple languages. (You know that the text is in English and Arabic. But for all the computer knows, it might be in Turkish and Urdu.)


 1:17 am on May 12, 2013 (gmt 0)

Why do you "have to" use a substandard custom font? What's the part you're not telling us?

Because it's a project requirement. I'm the developer.

Ok, RegEx sounds good, I don't have much experience with preg_replace, how is it speed wise? to replace the characters?

Wouldn't it effect load time when applying on articles with ~ 1500 words?


 1:52 am on May 12, 2013 (gmt 0)

Ok, I ended up using this,

$string = 'The quick brown fox jumped over the lazy dog.';
$patterns = array();
$patterns[0] = '/quick/';
$patterns[1] = '/brown/';
$patterns[2] = '/fox/';
$replacements = array();
$replacements[2] = 'bear';
$replacements[1] = 'black';
$replacements[0] = 'slow';
echo preg_replace($patterns, $replacements, $string);

And made it into a function. so far so good.
Thanks for your answers.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved