Google Chrome is not displaying chinese characters correctly - css

I am facing issues that Chinese characters are not displayed properly in chrome. Below is a screenshot of whats happening.
I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
I really want to fix this via my code side. Is it possible?
EDIT: Some of the words show up while some did not.
I did add in the meta charset=UTF-8
EDIT2 : #torazaburo, showing you the code snippet. The problem is that firefox is able to display all the Chinese text!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My Website</h1>
<p>Some text...</p>
</body>
have you tried using meta charset
<meta charset="UTF-8">
It enables browsers to understand any language it can be chinese , Urdu , hindi any language which you will write.

I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
It's unlikely that this has anything to do with an extension. It could be due to a font issue, but that's also relatively unlikely. Probably you have an encoding problem, so:
Make sure your file is saved in UTF-8.
Make sure the file is being served as UTF-8.
Specify the the <meta charset="UTF-8"> tag proposed in another answer.
Make sure you have fonts selected which can display Chinese.
See also the second answer to this question.

Related

Copying arabic text in Windows

I have translated Arabic content in Microsoft Excel. Whenever I am copying it to my Wordpress site with Polylang Arabic language support, the letters get messed up like this:
الهاتف (اختياري)
Although the original text was like this:
I'm using Windows 7 with Office 2010 and this applies to every application I want to copy to. I've installed Arabic support for Windows and have tried both copying and pasting with Arabic keyboard as well as English. No luck.
Is there any way to do it?
I copied you text into Google and it formats it correctly, like in your image. You will need to set proper right to left layouts when ever you use these.
Try
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
Some text that is right to left...<p>
الهاتف (اختياري)<p>
</head>
</html>
Try the above code, this will display the wrong Arabic you gave to properly formatted Arabic.
The Important part is this, it sets the text direction to right-to-left "rtl" and language to Arabic "ar":
<TAG dir="rtl" lang="ar">...</TAG>
You can use dir= and lang= with quite a few tags in HTML.
You can use the right-to-left mark character:
الهاتف (اختياري)‏
Without ‏:
الهاتف (اختياري)
With ‏:
الهاتف (اختياري)‏

IE11 will not load external css from intranet

IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave

Internet Explorer css Error

My tutorial site works fine on google chrome but when i try to open it with any kind of internet explorer i can not see some part of visul items.
All information of my design exist in css file. However being gray of right part can be observed but on the other hand i can't see navigation bar.
I put my some codes. It is high possible to have any link between these code and this situation.
At the beginning:
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<html>
<title>Tutorials</title>
...
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
For more you can check: http://www.soccerforecast.com/Tutorials/SFUnderCons/currentForecasts.php
I don't have 10 reputation so i can't put direct image to this site so link is: http://postimage.org/image/y94bk7afb/
I don't usualy control my site with different kind of browser, now i recommend to do this everyday. Now i don't have any idea which code make this situation. :)
Yout HTML is a little messed up.
Fix these things and it might help:
Place your HTML tag before the HEAD tag but after the DOCTYPE tag.
Place a closing HTML tag at the very end of your document.
In the TABLE you have towards the end of your page you have an extra closing TR tag.
The comment before your DOCTYPE will possibly cause problems too.
Try running your site through a validator to check for errors like these.
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/
It's because you have a comment before your doctype declaration.
This is forcing the page into quirks mode if you remove that comment you should be ok.
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" -->
<!doctype html>
<head>
Edit... The head and html tags are the wrong way round also.

ie9 spacing - css not working as it should

Hi might be a simple one for someone.
I have finished working on this website and in ie9 there is a lot of line height issues - i don't even know if line height is the right word - spacing seems to imply letter spacing.
The easiest way to explain my issue is with screen shots.
Why is the 3rd one (ie9) so out?
url for the website is http://www.geckowebsolutions.co.uk
Could it be the font .eot is rending differently to the otf?
If so how can I work around this?
DanSiop
Change your headers to tell IE9 to follow the modern norms :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Do the 3 changes : the doctype, the html element and the meta.
I am not sure why it's happening (trouble shooting in IE sucks) but it's your.breadcrumbs CSS that is being affected. Quick and dirty solution is to add an IE conditional.
<!--[if IE]>
<style>
.breadcrumbs{top:11px;}
</style>
<![endif]-->

Combining HTML docs with different charset

I saved a MS-Word Doc with the 'save-as' option of "Web Page, Filtered". I want to insert the HTML & CSS code that was generated inside an HTML5 document that has my header, menu, footer, etc. The first question is in regard to charset and header info:
MS-Word generated HTML (Saved as "Web Page, Filtered"):
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 12 (filtered)">
My HTML5 template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
The main issue I see is the two different character sets (UTF-8 vs windows-1252). Additionally, I am guessing the meta tag "name=Generator content="Microsoft Word 12 (filtered)" will not be a problem and perhaps can just be removed (?).
I can sort out the CSS with one exception. I do not know what the '#' symbol means. Example:
#font-face
{font-family:"Book Antiqua";
panose-1:2 4 6 2 5 3 5 3 3 4;}
I looked through the document and do not see "font-face" IDs or classes. So I am guessing this might change all of the fonts in the document. This might be a problem (if true); as stated, the new document will have my menu, header, footer, etc.
You should not copy&paste anything that ms office pukes out into a website; mostly because your code becomes a big mess, and it will most likely only look right in IE. This just my experience after i got a lot "Your website is broken!!!" complains after someone pasted ms-word-"html" into joomla pages.
Anyway, charset on your website must be utf-8.
Your #font-face looks broken to me. I only know it in a slightly different syntax:
#font-face {
font-family: "Awesomefont";
src: url("fonts/awesome.ttf");
}
this alone wont do anything, until you apply "Awesomefont" somewhere else:
h1 { font-family: "Awesomefont"; }
Here is a set of PowerShell scripts that will clean Word-Filtered HTML and correctly tag super/subscripts about 95% of the time. (No, you can't get better than that, Word is made for print.)
https://github.com/suzumakes/replaceit
This also changes the characters that M$ barfs out in windows-1252 class to their appropriate UTF-8 counterparts. It removes all the styling and classes so that you can drop the HTML straight into your template with minimal fuss. Depending on how crazy the person who made your Word doc went with justifying text and funky layouts you may have just a few minutes of cleanup, or you may have to fix M$'s propensity to insert soft hyphens all over the place.
Instructions are there in the ReadMe and if you happen to encounter any additional characters that need to be caught or come up with any tweaks/improvements, I'd be happy to see your pull request.

Resources