Search code examples
htmlcssmultilingualfarsi

Multi-language styles within a single element with CSS

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.

Solution

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