You are browsing through css

Chinese language tips for web design

Friday, May 14th, 2010

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. I want to archive them here just in case I need to reference this ever again since it was PAINFUL…
Some Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “Microsoft YaHei”, “MS Yahei”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: Hei, HeiTi or “Microsoft YaHei”
  3. Standard chinese serifs are: “Fang Song”, or “宋体”
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=”utf-8″>

References:

IE Hate. PNG’s don’t display.

Monday, October 29th, 2007

IE can’t deal with PNG’s. It makes them opaque- kinda defeats the purpose…
Here’s a solution to fix png display in IE. It makes directX display pngs instead of IE.
Code that works

Php and html minitips

Thursday, September 13th, 2007

Set your site’s base (all links will think of it as the site root)

    Say your page is located at:
      yukiko/pages/news/IGotAJob.html
    In your page’s <head> tag put the root page:
     <base href=”yukiko/index.php”>
    So instead of linking relative to the page,
     <img href=”yukiko/index.php” src=”/images/janitor.jpg” />
    a link will be relative to the site root.
     <img href=”yukiko/index.php” src=”yukiko/images/janitor.jpg” />

Dump another html file into the current php file:

    <?php include “header.html”; ?>

Good site setup (for me at least):

    yukiko/
    • pages/
      • header.html
      • footer.html
      • page1.php

    • css/
      • header.css
      • footer.css
      • style.css
      • index.css
      • page1.css

    • images/
    • index.php

CSS workaround for Safari dispaying Helvetica fractions

Monday, July 23rd, 2007

A note to whomever (probably myself):

When trying to specify Helvetica as a font-family in CSS, make sure that you use the full “Helvetica Plain” tag in quotes. Otherwise, safari, (I’m testing on v2.0.4) will default to Helvetica Fractions. It will look like: