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

1 comment

1. 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-u9FFFu3400-u4DFFu20000-u2A6DFuF900-uFAFFu2F800-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>

   The best solution though, is to pre-process your HTML/user input with regex once, which will do the same as above, so that runtime regex wrapping of Chinese character can be avoided.

Comments are closed.