I was developing MVC3 application. In my Application, there will be a number of Chinese and Japanese characters. When showing those characters on the webpage I was getting some weird characters appears on the screen instead of Chinese or Japanese characters. Can anyone tell me how can i show above mentioned language characters without any issue on the page.
I have Tried the below way
font-family: Arial Unicode MS, Arial, Helvetica, sans-serif; // But this way didn't help me out.
Thanks
If you're using ISO character sets, you need to use the right one for these languages
Character Sets
Or you can just simply set character set to UTF-8 and not worry about the language on the page it self. If you're still seeing weird characters, might be that you somehow overwrite the encoding, or perhaps have a malformed HTML code.
Cheers,
Deadpool
Related
We're having some trouble displaying the latin small letter a with caron (ǎ or U+01CE) correctly in Windows 10 - Chrome with font-family Verana. It displays the caron next to the letter 'a'. Other fonts display it correctly.
It works fine in Firefox and IE (under Windows/Linux/macOS) with Verdana.
Also Chrome in Linux/macOS displays it perfectly. The combination Windows + Chrome + Verdana seems to be the only one having difficulty.
For example, check Graphemica a with caron and put the font-family of the example letter on
font-family: Verdana
If you have Windows it will display the caron not above, but next to the letter 'a'.
Does anybody have an idea how we can fix this for Windows Chrome users?
Other letters with a caron, for example: č (U+010D) works fine.
Does anybody have a suggestion how we can let this 'ǎ' work in Chrome - Windows - Verdana, without changing the font?
Thanks in advance.
It doesn't display correctly because U+01CE is not present in Verdana. The components (a, caron) are both present, but there is no character (nor any OpenType layout rules) that combine them into U+01CE form. When you see it "working" in other browsers, it's likely because it's substituting with a fallback font whose design is similar to Verdana (or it's at a small text size where you can't see the difference).
More about Verdana here: https://learn.microsoft.com/en-us/typography/font-list/verdana, have a look at the "Code pages" section. None of the listed pages contains U+01CE, so the font simply doesn't support that character. The other characters you mention are in Verdana.
To work around, you could use some simple CSS to set up a fallback for that specific unicode, for example something like this:
#font-face {
font-family: "fallbackfont";
src: local('Tahoma');
unicode-range: U+0100-01FF;
}
<p style='font-family: fallbackfont, Verdana; font-size:72px'>a ǎ</p>
NOTE: I chose local 'Tahoma' for a fallback here because its design is more similar to Verdana than others. And it is selected for use for the entire Unicode range of U+0100-01FF. But you could (probably should) use a webfont or other local/"web-safe" font of your choosing. Also, you could set the unicode-range for just the one character if you're sure that's the only one not displaying correctly for your text.
I'm using i18ln in Ruby and providing translations for my views. My spanish translations require an acute e, or this é . This is my simplified translation in my es.yml file
es:
headline: "Hola, tus créditos son:"
I am trying to make the é appear correctly, and as this is not HTML, I can't use those escaped characters. However I THINK I can use unicode. But it doesn't work for me.. I'm getting the unicode characters from here:unicode resource
I've tried all of the following with no luck:
\X*U+00E9\
\X**U+00E9\
\x*U+00E9\
\U+00E9\
I just want an é any help here?
Here is a screen shot to see what's happening:
And I realized you can pass along HTML in the es.yml file but that hasn't helped.
Oh wow, it ended up being the font. I was using Helvetica and it didn't have the right characters. I switched over to Roboto, which does have that character and everything is golden. Wow, lesson learned.
My collegue wants to use my application in Japan. Therefore I tested the application in Windows 7 and changed the Regional Settings for "non-unicode"-Language to Japanese.
Now I have the problem, that some text are shown right with japanese characters. Other text is displayed with wrong characters (not japanese).
I tested also other languages like Chinese or Taiwanese and every text is right. I have only problems with Japanese.
Has anybody an idea what's wrong?
It is most likely because of the "Unihan" principle being applied by Unicode, which forced similarly-looking Japanese and Chinese letters to be encoded into same Unicode character despite their glyph being difference. Many computer systems would use Chinese font instead of Japanese font by default so the Chinese font would be displayed, hence it would result in wrong glyph. Changing the "non-unicode-language" into Japanese would not solve such a problem.
In order to display the proper Japanese glyph, you need to make sure that your application is going to use a Japanese font. Normally if your program is to run in an entirely Japanese environment which include changing the default language and font of the computer into Japanese then Japanese font would be used. On the other hand, you can also specify or embed a Japanese font for your application to make sure it would work as intended.
I have Museo-300 mostly working with #font-face, but certain letter combinations like "ff" and "fi" are disappearing in Firefox (confirmed in v3.6 and v7.0.1). So "microfinance" becomes "micronance".
Note that I'm outputting these as individual letters, not as ligatures. When I view source on both the server and the browser, "coffee" for example is spelled with all six letters individually—not a unicode ligature character for "ff".
The output looks right in Opera, Chrome, Safari, and IE (even IE6).
I downloaded Museo-300 from MyFonts along with their web font example template.
#font-face {
font-family: 'Museo-300';
src: url('webfonts/151B6C_0.eot');
src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}
and all the referenced files are in place. I invoke it like this:
font-family: 'Museo-300', sans-serif;
I tried a different font as a test (Code Pro Light Demo, also gotten from MyFonts) and Firefox dropps "fi" but not "ff" for that one.
An idea what's going wrong?
For anyone reading this in the future, note that as of FF 15 (I think) the syntax has now changed, and you'll need to use this:
-moz-font-feature-settings: "liga=0";
-moz-font-feature-settings: "liga" 0;
You can tell Firefox to skip looking for ligatures and treat them as regular characters by adding
-moz-font-feature-settings: "liga=0" in your font-face declaration.
In case others hit this problem, I resolved it with help from MyFonts technical support. I'm not sure whether this issues is specific to MyFonts, but I suspect it affects other web font sources.
Direct (Solvable) Cause
When a standard True Type font (TTF) gets processed into the multiple versions that are useful for a web font (EOT, SVG, WOFF), the processing tool or vendor can decide whether or not to include the font's full character set. Some will default to a reduced character set to reduce file sizes.
In my case, one or more of the generated web font files excluded ligatures, presumably considering them to be non-essential typographic tweaks. To fix the problem I used a custom web font builder at MyFonts to generate font files with the full character set.
(For MyFonts specifically this was at Order History > select relevant font > Webfont Kit Builder tab > Advanced, then check both "Complete Character Set" and "Keep OpenType Layout".)
Underlying Cause
My belief, which is only an educated guess:
I think Firefox is going out of its way to do nice typography, more so than other browsers. So when it sees something that it could render as a ligature ("fi", "fl", "ff", etc.) it tries to render the letters as a single ligature glyph rather than as two distinct characters. If your web font doesn't include the ligature glyphs, your letters will disappear. (If my guess is right, I'm surprised I haven't read about this problem before.)
Myfonts.com recently changed some display settings. Their support wrote back very quickly with the following info:
If you click on the Font image (the image that shows the sample),
which is located right above Kit Options, you will see the Complete
Character set and Keep OpenType Layout options.
This view is not currently available through Firefox though, but I was able to download the complete character sets using IE9.
I have title and labels with unicode labels in Google Chart, but they are not being displayed properly.
Here's an example: http://chart.apis.google.com/chart?chs=300x225&cht=p3&chco=344566,C4C4C4&chds=0,90&chma=70,70&choe=UTF-8&chtt=Test&chd=t:27933485,20611682,34172068&chl=Un%E9%A7%85xbr%E1%83%A6cker|Test1|Test2
Characters do not appear right as you see.
Is there a way to make google charts display utf-8 characters properly? I've tried many things but nothing worked for me.
The problem appears to be the unicode codepoints (E9A785 -> 99C5 and E183A6 -> 10E6) that you are providing. These characters do not appear to be displayed in a google chart. Experiments with other codepoints (specifying them as UTF-8 in the same format as your query) appear to work fine.
The particular characters in your example (the first is from the CJK Unified Ideograms and the second from Georgian) are a little strange. You might want to double check that they are correct.