Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ethantw/Han

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

css han sass stylus typography

Last synced: 19 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/ethantw/Han
Owner: ethantw
License: mit
Created: 2011-03-07T17:10:42.000Z (over 13 years ago)
Default Branch: master
Last Pushed: 2024-02-13T15:15:05.000Z (4 months ago)
Last Synced: 2024-04-14T10:15:01.416Z (2 months ago)
Topics: css, han, sass, stylus, typography
Language: JavaScript
Homepage: https://hanzi.pro/
Size: 3.97 MB
Stars: 2,377
Watchers: 81
Forks: 134
Open Issues: 15
Metadata Files:
- Readme: README-en.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Lists

awesome-stars - Han - 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (CSS)
awesome-stars - ethantw/Han - 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (JavaScript)
awesome-stars - Han
awesome-stars - Han
webtheme-awesome - 漢字排版框架
awesome-stars - ethantw/Han - `★2387` 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (JavaScript)
awesome-stars - ethantw/Han - 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (JavaScript)
awesome - ethantw/Han - 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (JavaScript)
awesome-stars - ethantw/Han - 「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi. (JavaScript)

README

- [中文](https://github.com/ethantw/Han/blob/master/README.md)
- [日本語](https://github.com/ethantw/Han/blob/master/README-ja.md)
- English

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)](http://ethantw.github.io/Han/latest/)

## Installation
- NPM `npm install --save han-css`
- Bower `bower install --save Han`
- Rails `gem install 'hanzi-rails'` ([Check out the details here](https://github.com/billy3321/hanzi-rails))

### 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)][api] for detailed information.

[api]: http://css.hanzi.co/manual/sass-api

### 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][cdnjs].

[cdnjs]: http://cdnjs.com/libraries/han

````html

````

JavaScript,

````html

````

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 `` tag to activate DOM-ready rendering.
3. Or, customise your own rendering routine. [Check out the manual][rendering] for further information.

[rendering]: http://css.hanzi.co/manual/js-api#rendering

### 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.

[jsdom]: https://github.com/tmpvar/jsdom

## 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)