DOCSEARCHbyAlgolia
Submit Docs

han-css

repository·master·Indexed 25 days ago

https://github.com/ethantw/han

A CSS typography framework optimized for Hanzi (Chinese characters) that combines semantic styling, character design, and advanced typesetting. It supports Traditional Chinese, Simplified Chinese, and Japanese, providing a standardized environment for both traditional and modern screen reading. Version 3.3.0 can be installed via NPM, Bower, or the hanzi-rails gem, and is available via CDN.

Tokens
1.6K
Snippets
7
Records
14
Agent score
72%

What's inside han-css

  2. Overriding Han styles

    master

    Han uses the :lang pseudo-class to apply language-specific styles. Because of this, direct style overrides can lead to unexpected results.

    Affected areas include:

    • Text-level semantic styles.
    • Combinations of grouping content elements and section elements (affects font-family only).
    • The root html element (affects font-family only).

    Recommended Solution: Instead of using !important, ensure proper style inheritance by adding appropriate language attributes to parent elements or using more specific selectors. Use the browser DOM inspector to understand the inheritance and override relationships.

  3. How to use han-css in your project

    master

    To implement han-css correctly, follow these steps:

    1. Include Stylesheets: Reference the compiled han.min.css (or import it via Sass/Stylus) before all other stylesheets in your project.
    2. Enable DOM-ready Rendering: If you need the JavaScript features, include han.min.js and add the class han-init to your <html> element. This triggers the DOM-ready rendering process.
    3. Custom Rendering: If you require a custom rendering method instead of the default, refer to the JS API documentation.

  5. Use han-css via CDN

    master

    If you do not need to customize the styles, you can use the pre-compiled CSS, JavaScript, and Web Fonts provided via cdnjs. This is recommended for fast downloads and caching.

    CSS Link:

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

    JavaScript Script:

    <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
    <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.js"></script>

  6. Customize han-css styles

    master
    You can customize the appearance of han-css by using variables or module imports in Sass or Stylus. This allows you to create a bespoke stylesheet tailored to your specific design requirements.

  7. Install Han (漢字標準格式)

    master

    You can install Han using various package managers depending on your environment:

    • NPM: npm install --save han-css
    • Bower: bower install --save Han
    • Rails: gem install 'hanzi-rails'
    npm install --save han-css

  8. How to use Han.css

    master

    To implement Han.css in your project, follow these steps:

    1. Include Styles: Include han.min.css before all other styles in your project (or import it via Sass/Stylus).
    2. Activate JavaScript (Optional): If you want to use the advanced typesetting features, include han.min.js. To activate DOM-ready rendering, add the class han-init to your <html> tag.
    3. Custom Rendering: Alternatively, you can implement your own custom rendering routine using the JavaScript API.

  9. Use Han via CDN

    master

    If you do not need customization, you can use the pre-compiled CSS, JavaScript, and Web Fonts via cdnjs.com for faster downloads and caching.

    CSS

    <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
    <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.js"></script>

  10. How to use Han in your project

    master

    To integrate Han into your website, follow these steps:

    1. Include Stylesheets: Import han.min.css (or the Han Sass/Stylus source) before your existing custom styles.
    2. Include JavaScript (Optional): Add han.min.js if you need advanced rendering features. To enable DOM-ready rendering, add the han-init class to your <html> tag.
    3. Customization: You can customize the rendering process via the JavaScript API.

  11. Install han-css via NPM, Bower, or Rails

    master

    You can install the han-css package using one of the following package managers depending on your environment:

    • NPM: For standard Node.js projects.
    • Bower: For legacy frontend workflows.
    • Rails: Using the hanzi-rails gem for Ruby on Rails applications.
    npm install --save han-css
bower install --save Han
gem install 'hanzi-rails'

  12. Handle style overwriting issues

    master

    Han.css uses the :lang attribute for numerous style corrections, which can cause unexpected style overwriting.

    Affected elements:

    • Text-level semantics (<i>)
    • Grouping content and sections (affects font-family only)
    • The html root element (affects font-family only)

    Recommended Solution: Instead of using !important, manage styles by adding the corresponding language attribute, using parental elements, or applying more specific selectors to respect CSS inheritance rules.