6

imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ? thanx

Bob Brown
  • 1,463
  • 1
  • 12
  • 25
Mostafa Eslami
  • 137
  • 2
  • 7

6 Answers6

10

One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.

Hence you can override CSS declarations by using [lang|="fa"] selector.

For instance:

[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
  <p> سلام دنیا </p> 
</html>

Or:

p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • that's right . pardon me :) i think my question is unanswerable :) i think i should forget that :) – Mostafa Eslami Dec 25 '14 at 22:51
  • 1
    @MostafaEslami I do not recommend this way but assuming you are using JavaScript, it is possible to match Persian contents by regular expression so they can be wrapped by a proper wrapper element having an specific class name or whatever in order to apply your desired styles to them. – Hashem Qolami Dec 25 '14 at 22:56
6

you can use the following link for this purpose:

Display text with two language in webpage with different fonts with font-face at rule in css

@font-face { /* Persian Font */
        font-family: 'MyFont';
        src: url(Fonts/BYekan.ttf);
        unicode-range:U+0600-06FF;
    }
@font-face { /* english font */
        font-family: 'MyFont';
        src: url(Fonts/ALGER.TTF);
        unicode-range: U+0020-007F;
    }

Usage:

 body{
  font-family: 'MyFont';}

tip: for different languages you can use different "unicode-range".

Meysam Sahragard
  • 304
  • 2
  • 4
2

using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex : 

:lang(ta)   {
    font-family: Latha, "Tamil MN", serif;
    font-size: 120%;
    }

and dont forget use lang in you HTML code 

<p lang="en">Ceci est un paragraphe.</p>
MR Gharibeh
  • 344
  • 2
  • 11
  • This is the best answer. OP should already be using `lang` on the `html` element *anyway*. See http://www.w3.org/TR/WCAG20-TECHS/H57.html – danielnixon Dec 25 '14 at 22:31
  • that's right . but what should i do for define two fonts for two different languages ? – Mostafa Eslami Dec 25 '14 at 22:40
  • Why would he include code for Tamil language when the content is mixed English and Farsi? And it is pointless to use a language selector when no corresponding attributes are used in markup. – Jukka K. Korpela Dec 25 '14 at 22:47
  • It's straightforward to substitute whatever typeface OP wants. Changes in document language *already* need to be marked up using `lang` for--among other reasons--screen readers, so it's appropriate to target `lang` from CSS. – danielnixon Dec 25 '14 at 22:54
  • Tamil doesn't get in handy . just i need two fonts for two different languages ... – Mostafa Eslami Dec 25 '14 at 23:02
2

If you really want to use two different fonts for two different languages, your options are:

1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.

2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.

3) Use CSS code that selects font family by Unicode range. I won’t go into details, since this approach has too limited browser support to be practically useful yet.

However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks for sharing, I wasn't aware of [`unicode-range`](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range), it looks pretty useful. Just surprised that IE9 supports it. – Hashem Qolami Dec 25 '14 at 23:10
  • the problem is i didn't find suitable font that designed good for each languages . anyway tnx for guidance ... – Mostafa Eslami Dec 25 '14 at 23:12
  • Out of curiosity, which user agent(s) support `class` but not `lang`? – danielnixon Dec 25 '14 at 23:37
  • @danielnixon, there is really nothing that browsers need to do in order to support the `lang` HTML attribute, since it is defined as declarative, not as a having any specific effect. But when it is used for the purpose described here, the CSS support to `[lang=...]` or `:lang(...)` *selectors* becomes crucial. The former is well supported (unless you need to care about IE 6), but the latter, more convenient selector requires IE 8 or higher and “standards mode”. – Jukka K. Korpela Dec 26 '14 at 08:25
0

use B-Nazanin or others for persian content and use Open sans for english contect.

If you want to set B-nazanin for persian and set open sans for english, try this code in css:

body{
  font-family: "Open sans","B-nazanin";
}
  • 1
    i want to use Times New Roman for all English words and use B-Nazanin for all Persian words . that you said was alternative font that when browser didn't have first , use second ... – Mostafa Eslami Dec 25 '14 at 22:26
0

If I understand your question correctly, you will mix Farsi and English on one web site.

Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.

Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.

I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.

Bob Brown
  • 1,463
  • 1
  • 12
  • 25
  • exactly . but the problem is i have lots of mix . for example : farsi farsi farsi farsi English farsi farsi English farsi farsi English farsi farsi English farsi ... i should do repetitive job in several times and i will be dying :) – Mostafa Eslami Dec 25 '14 at 22:19
  • `
    farsi farsi farsi farsi English farsi farsi English
    ` I'd be looking for an automagic way to generate those `` tags.     – Bob Brown Dec 25 '14 at 22:24
  • i didn't want to do repetitive job but you emphasize to do :) i learned that i shouldn't do repetitive job cause i asked this question ... – Mostafa Eslami Dec 25 '14 at 22:29
  • Use `` and then `

    ` only on the paragraphs that are English.

     – danielnixon Dec 25 '14 at 22:30
  • It is not that I want you to do repetitive work, it is that I cannot see a way around it. – Bob Brown Dec 25 '14 at 22:46