CODEWITHSUNDEEP
htmlcss
FDavidov
FDavidov

Reputation: 3675

HTML small font size for Middle-East and Eastern languages

I had a post on this related only to Middle East languages (and to which I didn't get a usable solution for me), but it turns out that the same problem appears when switching to any non-western language.

My Web application is supposed to support all languages with all character sets. From all aspects (database, direction, etc.) it works fine, except that the size of the characters when selecting for instance, Arabic, Japanese, Hebrew, etc., is significantly smaller than that of English.

I understand that there is a way to scale fonts globally, but don't know exactly how to do it.

My application is developed in HTML, JavaScript and AngularJS.

Upvotes: 2

Views: 1295

Answers (3)

Tadayuki YOSHIDA
Tadayuki YOSHIDA

Reputation: 11

We have some experiences of developing CSS styles per language. Here is the table we use for proper font sizes. Primary use for these font sizes are desktop (web) applications. For mobile applications, some adjustment may be needed but they are likely scaled based on these sizes.

  • Arabic: 11 - 14px
  • Bengali: 13 - 16px
  • Cyrillic (Russian, Bulgarian, Ukranian, etc.): 9 - 12px
  • Greek: 9 - 12px
  • Hebrew: 9 - 12px
  • Hindi: 11 - 14px
  • Latin (English, French, German, Italian, Spanish, etc.): 9 - 12px
  • Malayalam: 11- 14px
  • Japanese: 11 - 14px
  • Korean: 9 - 12px
  • Simplified Chinese: 11 - 14px
  • Traditional Chinese: 11 - 14px
  • Telugu: 11 - 14px
  • Thai: 11 - 14px

Upvotes: 1

redolent
redolent

Reputation: 4259

You can specify foreign fonts. You may have to download a font for that language, but all you have to is "stack" it with English fonts. Let me clarify with this CSS example:

p {
    font-family: 'AsciiSans'
               , '游ゴシック体'
               , 'Yu Gothic'
               , YuGothic
               , Meiryo
               , 'Hiragino Kaku Gothic Pro'
               , sans-serif
}

So you can see that they're using this method here. AsciiSans doesn't have Japanese characters, so the browser will use the next font.

EDIT

The reason this is important; find a font for each language that is the same size as your english font. Or find a smaller english font. There are plenty of free fonts. Hopefully there's just an international one you can use (Maybe "OpenSans")

e.x.:

http://www.fontspace.com/category/arabic

https://fonts.google.com/specimen/Open+Sans

EDIT 2

To include Open Sans, add the following:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

and do either <font face="Open Sans">my text</font>

or <span style="font-family: 'Open Sans', sans-serif;">my text</span>

Upvotes: 0

Bilal
Bilal

Reputation: 2673

I assume that you must have a lang attribute appended to html tag. You can style on the base of that attribute like this.

body { font-family: "Verdana"; font-size: 12px;} /** global **/
*[lang="ar"] {font-family: "Scheherazade",serif; font-size: 16px !important;} /** for arabic **/

This might not be a perfect solution as you can't append lang attribute to every DOM element since you can have different font sizes for different elments. But you can tweak this solution as you need.

I solved this problem in one of my applications using this technique. But with SASS or LESS, its much easier to handle all this. Since you are using AngularJS, so you can also define language based classes and then assign to specific DOM elements using a directive.

Upvotes: 0

Related Questions