CODEWITHSUNDEEP
javascriptjqueryhtmlcssfonts
Sanha Cheong
Sanha Cheong

Reputation: 151

Change font & font-size for different languages without the html lang tag

So, I have some posts that use two different languages (English & Korean) in lines: something like:

This is an example (예시).

and I switch back and forth between the two languages quite frequently.

I want to use different fonts with different font sizes as well.

I would usually do this by specifying different blocks of CSS using lang(en) and lang(ko), but this becomes annoying, since this would require writing my HTML content lines like:

<p lang="en">This is an example (<span lang="ko">예시</span>)</p>

I want to minimize having to specify HTML stuff, since I mix the two languages frequently and plan on writing my posts using Markdown.

I know that, within CSS font-family, if a specific language isn't provided by the high-priority font set, it automatically looks for the next, so I can do something like:

body { font-family: "Some Only English Font", "Some Korean Font" }

which will do the trick for changing the font, if the first font does not support Korean. Is there maybe some way I can utilize this property to change the font sizes for the different languages?

Any other method to do this, of course, will be helpful.

(Is it perhaps possible to use JS to detect the font, and change the font-size only if it uses the "Some Korean Font"?)

Upvotes: 4

Views: 1264

Answers (3)

David
David

Reputation: 7285

I think that to look for a JS method to detect the language (despite being complicated) will add an unnecessary overhead to your pages: I would fix it beforehand.

Why don't you write your post in a text editor like this?

This is an example (@@@예시@@).

Then just replace @@@ with <span lang="ko"> and @@ with </span> and start to work normally with Markdown.

Depending of your content, maybe you can find a faster combination of characters to identify the Korean text:

This is an example (%%예시%).

Choose whatever that is unique and fast to type.

You can do it manually (search and replace) if you write like one post per week or through an automatic script if you write very often. Actually, you could create a task that triggers the script when a file in certain directory changes.

Upvotes: 2

ControlAltDel
ControlAltDel

Reputation: 35011

Given your requirements, I'd recommend setting the Korean text and adding your font-family font-size spans in a pre-processor method called in $

like,

$(function() {
  detectKoreanAndAddSpans();
});

Upvotes: 0

user8556290
user8556290

Reputation:

HTML5 got an attribute named

data

<tagHTML id="myid" data-var_name="value" data-lang="en" ...>

you can add a lot of data-lang="en" ... the result is you got a dataset and you can got a list as an array and access simply like this :

var article = document.getElementById('myid');

article.dataset.var_name// "value"
article.dataset.lang // "en"
..

Upvotes: 0

Related Questions