I’m on holiday now, but I’ll make sure to check this when I’m back!
Kind regards,
Frank
Thanks for your reply Frank. Enjoy your vacation 😉
The first line of my css file is this :
@charset “utf-8”;
Here is an example of something that breaks due to not being UTF-8 encoded.
font: 100%/1.43 “Helvetica Neue”, Helvetica, Tahoma, “DejaVu Sans”, “微軟正黑體”, “Microsoft JhengHei”, “华文细黑”, STXihei, “宋体”, SimSun, “新宋体”, NSimSun, PMingLiU, “Arial Unicode MS”, sans-serif;
So I’m back, working through my support-request-queue and you are the first one 🙂
OK, could you open up /wp-content/autoptimize/classes/autoptimizeCache.php and on line 45
change
public function cache($code,$mime) {
if($this->nogzip == false) {
into
public function cache($code,$mime) {
$origEncoding=mb_detect_encoding($code);
if ($origEncoding) {
$code=mb_convert_encoding($code,"UTF-8",$origEncoding);
} else {
$code=mb_convert_encoding($code,"UTF-8");
}
if($this->nogzip == false) {
and let me know if that changes anything?
frank
Makes no difference. The Chinese characters are still corrupted. And yes, i did save/clear cache before checking again 😉
ok, think i’ll have to look into this on my own test-blog, can you provide me with a link to the css-file (or theme) for me to download?
frank
Hi Frank. Here is a link to the theme :
http://wildmice.ca/nelson-base.zip
and the CSS file from my local test :
http://wildmice.ca/autoptimize_5aed7fb9d9fbcb5a619743cd06a9fd62.css
I believe the default font will have Chinese fonts in the list. If not, go into theme options > fonts and select “Chinese”. The broken fonts are near the top of the CSS file, before Font Awesome, starting around character 1000.
Morning Shanna;
It seems I was way to late in downloading the theme-file, could you re-upload it (or send it to futtta-at-gmail-dot-com)?
frank
Wow, encoding stuff is not simple and yet it is simple in the end … 🙂
So I’ve set up a test-site with your theme and indeed when looking at the source of the optimized CSS, the Chinese characters are messed up. The reason is that the content-type of these files is simply “text/css”, there’s no charset-information in there (“text/css; charset=utf-8”). This is the case for all CSS-files on my installation (including individual CSS-files in your theme) and actually depends on webserver configuration (we’ll get to that later).
A first, simple solution is to have Autoptimize not deliver the optimized files statically (.css or .js) but dynamically instead (.php). This is the last option on the settings-page and indeed sets the content-type to “text/css; charset=utf-8” (for CSS) upon which the Chinese characters are correctly rendered in CSS source view.
If you want to stick to static delivery of Autoptimized files and still see the Chinese characters rendered correctly, you can dive into your Apache configuration to make sure your webserver adds the correct charset for static files. This page at w3.org lists multiple ways you can do that.
Now one last remark, and maybe the most important one; although when looking at CSS source the Chinese characters are messed up in Firefox (but look OK in Chrome), this is not the case when looking at the applied styles in the developer console (“inspector” or “style editor”). My hunch; the CSS source is shown as is, unparsed by the CSS-engine. When looking at the applied CSS, the CSS-engine has kicked in and found the @charset "utf-8"; which allows Firefox to correctly render the Chinese characters.
Summary;
* you can switch to dynamic delivery
* you can alternatively change your apache config
* but you may even not have to bother as the characters are read as UTF-8 anyhow when the CSS is parsed (due to the @charset-rule)
hope this helps,
frank
Hi Frank ~
Well that’s something i wouldn’t have thought about – that it may be working anyway despite the CSS looking mangled. Since my stylesheets do begin with @charset “utf-8”; on the first line, that makes some sense.
I will check and see if maybe it’s working fine. But first i have to resolve two other issues with Autoptimize actually breaking things. One was already posted here at :
https://wordpress.org/support/topic/conflict-with-fancybox?replies=7
yeah, the fancybox-one is next on my list (tomorrow probably).
looking forward to your feedback of this utf-8 issue though 🙂
frank
Yes, it looks like you are right. I put Autoptimize on my own site at wildmice.ca, where i have some Chinese pages. I switched the font to a Chinese font. Everything seems to work.
When i inspect it through the browser tools, i see the Chinese font names correctly, like this :
body {
font-size: 1em !important;
font-family: 微軟正黑體,”Microsoft JhengHei”,华文细黑,STXihei,宋体,SimSun,新宋体,NSimSun,PMingLiU,”Arial Unicode MS”,”DejaVu Sans”,Tahoma,sans-serif !important;
}
On this site too, the FancyBox sprite is broken for the lightbox closer X. However, the back to top button is not broken like it is with the theme that i sent you, so looks like that one is on my side to fix.
great, marking this one as resolved, the fancybox-issue has it’s own topic.
frank
