Han

「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.

ethantw
2428
135
JavaScript

Han.css

Han.css is a Sass/Stylus and JavaScript typesetting framework featuring style normalisation to semantic elements, typography and advanced typesetting. Its elegant, standardised Hanzi (CJK) environment provides not only the legacy of reading convention but also the de facto specification in the digital. Han.css is the solution to Hanzi web design for the time being.

Han.css supports Traditional Chinese, Simplified Chinese and Japanese.

View the test pages (zh)

Installation

Customisation

Han.css provides plenty of customisable features. By variable configuration or module import, it is easy to compile projects own style sheets. Check out the manual (zh) for detailed information.

Use of CDN

For high-speed downloads and cache, in need of customisation otherwise, you can use the CDN style sheets, JavaScript files and web fonts compiled by default configuration. The service is hosted on cdnjs.com.

<link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css">

JavaScript,

<script src="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.js"></script>

Web fonts,

  • WOFF //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/font/han.woff
  • OTF //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/font/han.otf

How to use

  1. Include han.min.css before all other styles (or import it via Sass/Stylus).
  2. Include the script file, han.min.js, according to own requirements. Then add the class name han-init onto <html> tag to activate DOM-ready rendering.
  3. Or, customise your own rendering routine. Check out the manual for further information.

JavaScript is optional

Han.css is of low coupling and high semantics. Style sheets and JavaScript depend little on each other. Multi-level fallback can be applied within the style sheets, hence the optional use of the scripts.

FAQ

Issue of overwriting styles

Different from most of the CSS frameworks, Han.css contains numerous style correction aiming at the language attribute :lang. It may cause unexpected results such as style overwritting not carried out.

Element types with language-based style correction:

  • Text-level semantics
  • Grouping content and combining situations with sections (font-family only)
  • The root element html (font-family only)

Solution

In order to handle these circumstances properly, please be well-alarmed with rules of style inheritance. It is recommended to add the corresponding language attribute, parental elements or other selectors, rather to overuse the !important declaration for maintainability.

Use the ‘DOM Inspector’ in browsers to observe the inheritance and overwritten relations of style sheets while in need.

Working environments

Han.js runs in DOM environments only. Introduce modules such as jsdom for server-side usage.

Browser support

  • Chrome (latest)
  • Edge (latest)
  • Firefox (latest)
  • Firefox ESR+
  • Internet Explorer 11
  • Opera (latest)
  • Safari 9

Requirements and developing commands

  • Node.js
  • LiveScript 1.4.0 (sudo npm install -g livescript)

Below goes the list with some useful developing commands:

  • Install dev-dependencies: sudo npm install
  • Start the dev-environment: npm start or gulp dev (including local server running and auto compiling)
  • Compile the distribution files: gulp build
  • Test han.js‘s API: gulp test (PhantomJS)
  • Update dependencies: sudo npm update && gulp dep

Han.css v3.3.0
Last-modified: 2016-3-19 00:11 (UTC+8)