As a native Bānglā (Language: Bengali) writer, we are dependent on to Unicode Bānglā characters. As we all know Unicode is an extended version of ASCII, and all the ASCII characters are still preserved in Unicode. And the rest of the World glyphs were added then. Now in Bānglā and other languages' concern (it can be Chinese, Hebrew, Japanese or Javanese), we have glyphs on Unicode.
But in Bānglā's concern the font-size: 100% for English characters is not enough for Bānglā characters. Because of the glyphs' position inside every grid. The thing can be understood by the following image:
While English character is largely fit in a grid, the Bānglā character is shrinked to fit within because of other supporting vowel-sign-glyphs.
Hence, while we put body{font-size: 100%} it's nice for English glyphs, but with the same CSS shows the Bānglā fonts smaller.
SOLUTION, NOW
At present, how we do solution for that, is to choose a nice font that has both good English and Bānglā glyphs, i.e. "Siyam Rupali". So that, it solves the matter a very little.
NEW THOUGHT
But what I'm thinking is a bit new:
» Why not we target the Unicode glyphs and put some specific CSS for only those?
Suppose the Unicode serial number #0048 4614 5784 4578 represents the first Bānglā character and #0048 4614 5784 9999 represents the last. So, if we can do some CSS like:
Unicode[glyph="0048461457844578" - "0048461457849999"]{
font-size: 150%;
}
I know nothing like the above is present in CSS. But, is there a way we can target specific glyphs to pose different CSS styles onto 'em?
If there's a way then many of the Bānglā Unicode users will be benefited, especially a large portion of Online Bānglā Newspapers need such a tweak over content to achieve dynamic control.
This is entirely a problem of fonts. If you choose a well balanced font in which glyph sizes are adjusted in a way that mixed language text looks good together, there's no real problem. CSS can help you here in so far as you can specify custom fonts for certain characters using #font-face:
#font-face {
font-family: 'bangla';
src: url('http://example.com/mybangla.ttf');
unicode-range: U+0980-09FF;
}
This fictional "bangla" font now applies only to the Unicode range U+0980 - U+09FF, which is the Bengali block. Choose some fonts wisely and you can create a well balanced appearance in modern browsers.
Related
in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in.
As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.
I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.
What do you think? How can I solve this problem?
Thank you
Markus
Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.
Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.
Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.
See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/
Yes it's still recommended you don't do this.
By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.
You should set different #font-face definitions with different font-weight values which make use of multiple font files.
I'm using the "Quicksand" font for a web project (http://www.google.com/fonts/specimen/Quicksand) and I've a problem : the ² character doesn't exist for that font. I thought that it would be rendered in other fonts (written after Quicksand in the font-family property), but it is not. When I write ², the only thing rendered is a white space.
Is there a way to render not supported characters by other fonts ?
Here's the CSS used :
font-family: "Quicksand", Helvetica, Arial, sans-serif;
There is a bug in the Quicksand font: for the Unicode code position U+00B2, SUPERSCRIPT TWO, it has an empty glyph. It is 396 units wide, so it is wider than a normal SPACE (300 units) in the font. Another character with a similar problem is U+201A SINGLE LOW-9 QUOTATION MARK “‚”, which has an empty glyph 230 units wide.
In principle, you could circumvent the bug by using unicode-range in a #font-face rule to specify that a particular character be taken from a different font. However, browser support is still too limited (and the approach would require that you host the font files instead of using them from the Google server).
Another possibility would be to edit the font. This requires a font editor and a permission from the copyright holder (and your hosting the font files of course).
A third option is to wrap each occurrence of “²” in a span element with a class and setting font-family on them suitably. Beware that this means mixing glyphs from different fonts, which should be avoided in good typography.
Finally, consider using a different font. There are several questions about rendering problems with the Quicksand font at SO.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
I'm making a webpage in a language other that English.
So the text contains English and other languages mixed.
I assigned font-family like
p{
font-family: 'EnglishFont', 'NonEnglishFont';
font-size:14px;
}
It works fine, but the original vector size of the fonts differs, causing the sentence looks weird in mixed languages.
so I want to assign different size for font in one css class, something like
p{
font-family: 'EnglishFont', 'NonEnglishFont';
font-size:14px, 16px;
}
is there any way to do that?
You cannot set font size so that it would depend on the font family.
Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).
If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.
This week we stumbled upon a rather odd bug in IE7 (surprise, surprise) when embedding a EOT font file using the #font-face construct.
To save on bandwidth, we often edit out sets of characters from a font that we know will not be used on a site. In this particular instance, we were using this font for headers that were all composed in title case, but displayed in uppercase using the text-transform property. Logically, we saved all our font files with only the uppercase characters, as we simply don’t use the lowercase.
The site rendered perfectly in every browser (including IE6 and IE8) that supported the #font-face construct, with the notable exception of IE7. IE7 only displayed the first character of each word in the proper font — the rest of the characters were displaying in the browsers default font.
Scratching our heads, we finally figured out that since the headers were actually written as title case (and therefore contained lowercase characters), even though the text-transform property was deployed and characters were appearing in uppercase, IE7 required the lowercase letters to exist in the EOT file to display the uppercase characters. (Intuitive, isn’t it?)
The simple fix was the rebuild the EOT file with both upper and lowercase glyphs, even though the lowercase characters are never used.
Problem online: http://www.testdomeinnaam.nl/mike/
How can I fix this properly? (i.e. make IE7 render the uppercase characters without having to include lowercase glyphs in the font.)
Thanks!
I think you already have the best fix - just include both uppercase and lowercase glyphs in your .eot.
Your server is using HTTP compression.
The current .eot is 22.62 KB, and it's compressed down to 13.87 KB.
Even if adding the uppercase glyphs doubles the size, it would still only be ~28 KB compressed.
Unless there's a simple "actual fix" to the problem, just stick with this.
Is it an option to transform the case on the server-side? For example, php has this: http://php.net/manual/en/function.strtoupper.php
That might fix your IE7 problem, if it's practical to use such a function.
a just had the same problem and solved it quick:
for ie7 to render the font correct with text-transform "uppercase" it's enough for ie7 that the lowercase-letters are defined in the font file, they don't need to contain real letters = they lowercase-letters in the font-file can be empty and the size of the font does not increase.