[Q] Different CSS based on letters

I have both English & Arabic letters in same sentence

[dev_guy13]

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.

[lucy24]

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.

[swa66]

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).

[lucy24]

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.

[dev_guy13]

Using utf-8 as input/output encoding.
PHP.MYSQL.HTML4&CSS3

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.

[lucy24]

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.)

[dev_guy13]

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?

[dev_guy13]

Ok, I ended up using this,

<?php
$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.