Stylesheet Taken-Over/Replaced by Chinese Characters

Stylesheet taken-over/replaced by Chinese characters

So I think I figured it out. This is weird. But anyway.

I copied and pasted your HTML to a local file to experiment with. And it loaded just fine. It was saved as UTF-8. Then I changed it to UTF-16, and I got exactly what you're seeing! As far as can tell, the browser (Firefox for Linux for me) is assuming the linked files are all in the same encoding as the HTML...

So - I assume the file on the server is in UTF-16, and if you change it to UTF-8 you should be good. Hope that fixes it!

PS: According to Firebug, your HTML is compressed by your server, even if you never explicitly told it to. But that doesn't seem to be causing any problems, thankfully.

Wordpress: Changing only the color of Chinese characters in page title & menu

CSS is not a programming language and therefore does not have the ability to detect Chinese character—this has to be done by using regex to filter individual characters on your page by their Unicode character range, and pick out those that fall within the CJKUI block. This range is very well discussed in another SO question here. To summarise the range:

• CJK Unified Ideographs: \u4E00 to \u9FFF
• CJK Unified Ideographs Extension A: \u3400 to \u4DFF
• CJK Unified Ideographs Extension B: \u20000 to \u2A6DF
• CJK Compatibility Ideographs: \uF900 to \uFAFF
• CJK Compatibility Ideographs Supplement: \u2F800 to \u2FA1F

The first range would usually suffice, but if you are working with Chinese texts containing rare, dated characters then expanding your selection to include the full CJKUI range is favourable.

However, by using regex on a large amount of text you are performing an expensive matching operation—still feasible for small snippets for texts where you know for sure Chinese characters will turn up. The trick is to detect the Unicode range (it is asked in the Python tag but also works for JS) of each character iteratively, and wrap it within a <span lang="zh"> element (using the lang attribute is semantically valid and recommended) with a specific class so that you can style it anyway you desire using CSS.

For the regex pattern, the trick is to use the character range selector: [...-...] (read more here). For the most reduced CJKUI set, you can use [\u4E00-\u9FFF]. However, as mentioned before if you want to really match to all possible Chinese unicode characters, you will have to use the full set: [\u4E00-\u9FFF\u3400-\u4DFF\u20000-\u2A6DF\uF900-\uFAFF\u2F800-\u2FA1F]

$(function() {  $('h1, p').each(function() {    var text = $(this).html();    $(this).html(text.replace(/([\u4E00-\u9FFF])/g, '<span lang="zh">$1</span>'));  });});

span[lang="zh"] {  color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1>Title 馦騜 here</h1><p>Lorem ipsum 跣鉌 dolor sit 嬞 amet, consectetur adipiscing elit. 蔍 Aliquam dignissim justo metus, nec rhoncus diam 娀 mollis sed. Pellentesque eu 庣 neque sit amet sapien accumsan accumsan 餳 vel nec quam. Sed rutrum 嬚 id justo quis pretium. Vestibulum 鍹 eu ligula id magna vehicula rhoncus nec a tortor. Integer id 楋dolor vitae mi gravida euismod ac eget 馻 dui. Pellentesque eu enim at erat 嬔 pellentesque posuere. Duis ligula magna, pretium sed 騧 sagittis eu, mollis a nibh. Integer ultrices 噈 molestie scelerisque. Maecenas 羭聧蔩 eget nulla sodales, pulvinar magna non, 嫶 vestibulum odio. Sed a luctus mi. In nec 烒 cursus justo. Nunc lacinia 烢 massa a eros semper scelerisque. Fusce dictum lacus 珛 nec ipsum 駷pellentesque, id finibus sapien lacinia.</p>

CSS styling removed from page

This is your stylesheet: it is in a different language. Specify either of the following:

HTML

<meta charset="utf-8">

CSS

@charset "UTF-8";

UPDATE.. It seems as though you are using a relative URL for the stylesheet.. both pages are in different folders.. try setting an absolute URL? Let me know if that works.

Use this: <link href="http://www.jordancharters.co.uk/nakedradish/css/style.css" rel="stylesheet" media="screen">

Why do my bootstrap glyphicons get rendered to Chinese characters?

Copying over the font files to the server again and clearing my browsers' caches has resolved this problem. I don't understand how both browsers had cache problems, but that's what fixed the issue.

My CSS is not being applied to my html, how do i fix it?

So, finnaly figured it out. The encoding was set to utf-16 and everything rendered as chinese kanji. This is the problem solution. Stylesheet taken-over/replaced by Chinese characters

chrome can't use local css for a simple local site

Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.

---

Related Topics