Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can CSS choose a different default font and size depending on Language

Tags:

css

unicode

I have the following CSS fragment:

INPUT{ font-family: Raavi; font-size: 14px;} 

Which works fine when the textbox contains some Punjabi script like this: ਪੰਜਾਬੀ

But the user might enter English instead, and I would rather use the Verdana font with a different size, since the English letters in the Raavi font are real funky and the size is wrong.

So my question could be stated as:

  • Is there any type of conditional font-family and size selection within CSS based on the input
  • Is there anyway for CSS to know about the input language?

So I could create the following PSEUDO_CSS:

INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;} 

or

INPUT.EN{ font-family: Verdana; font-size: 12px;} INPUT.PA{ font-family: Raavi; font-size: 14px;} 
like image 968
Noah Avatar asked Feb 11 '09 06:02

Noah


People also ask

How do I change the default font size in CSS?

Set Font Size With Em 1em is equal to the current font size. The default text size in browsers is 16px.

How do I change the font in HTML language?

To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

Does CSS allow custom fonts?

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

Is font size inherited by default?

This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size.


1 Answers

This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:

@font-face {     font-family: BBCBengali;     src: url(fonts/BBCBengali.ttf) format("opentype");     unicode-range: U+00-FF, U+980-9FF; } 

The unicode-range bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.

like image 197
Jaegra Oriades Avatar answered Sep 30 '22 01:09

Jaegra Oriades