Multi-language styles within a single element with CSS

Question

High. I am developing a simple website that contains multiple languages (English and Farsi to be exact).

Now I know how to define a style for each language separately if they are separated by elements (i.e. <p>, <div>, <section>, etc.). The way to do that would be something like this:

http://qnimate.com/css-for-multi-language-website/

But there are certain times that even a single sentence would contain both languages like this: This sentence contains English and فارسی.

I want to somehow define the styles for each language (mainly font-family and other font styles) without manually overriding the style for each word of the language contained with the other.

The CSS and HTML itself can't even separate a number from a letter, so you need to wrap each language in a `span`, or one ... or add a script to do it for you, a one that does know language — Asons, Nov 05 '16 at 07:18
Thank you @LGSon. What element would be best in terms that it would have minimal visual side-effect? For example a `
` is not suitable. — Mohammad Gharehyazie, Nov 05 '16 at 07:26
Thank you. Maybe you should write your comment as an answer. — Mohammad Gharehyazie, Nov 05 '16 at 07:34

score 1 · Accepted Answer · answered Nov 05 '16 at 07:40

The CSS and HTML itself can't even separate a number from a letter, so you need to wrap each language in an element, or one ... or add a script to do it for you, a one that does know language (which I don't recommend)

A span would be the most suitable, which will let the text flow as if the span weren't there.

Multi-language styles within a single element with CSS

1 Answers1