### Develop Han.css Locally Source: https://github.com/ethantw/han/blob/master/README-en.md Commands for developing Han.css locally. This includes installing dependencies, starting a development server with auto-compilation, and building distribution files. ```bash sudo npm install npm start or gulp dev gulp build gulp test (PhantomJS) sudo npm update && gulp dep ``` -------------------------------- ### Install Han.css via Bower Source: https://github.com/ethantw/han/blob/master/README-en.md Install the Han.css framework using Bower, a popular front-end package manager. This command adds Han.css as a dependency to your project. ```bash bower install --save Han ``` -------------------------------- ### Install Han.css via NPM Source: https://github.com/ethantw/han/blob/master/README-en.md Install the Han.css framework using the Node Package Manager (NPM). This command adds Han.css as a dependency to your project. ```bash npm install --save han-css ``` -------------------------------- ### Install Han.css for Rails Source: https://github.com/ethantw/han/blob/master/README-en.md Install the Han.css framework for Ruby on Rails applications using the 'hanzi-rails' gem. Refer to the gem's documentation for detailed integration instructions. ```bash gem install 'hanzi-rails' ``` -------------------------------- ### HTML and CSS for Page Structure and Styling Source: https://github.com/ethantw/han/blob/master/demo/italic.html This snippet defines the basic HTML structure and CSS rules for the webpage. It includes rules for hiding horizontal overflow and setting margins, maximum width, and padding for the article content. The CSS also defines styles for bold and italic text. ```html html { overflow-x: hidden; } article { /* position */ margin: 0 auto; /* box */ max-width: 35em; padding: 0 .5em 15em; } .bold { font-weight: bold; } .italic { font-style: italic; } ``` -------------------------------- ### Activate Han.js Rendering Source: https://github.com/ethantw/han/blob/master/README-en.md Activate Han.js's DOM-ready rendering by adding the 'han-init' class to the html tag. This ensures that Han.js processes and styles CJK content automatically. ```html ``` -------------------------------- ### Include Han.js via CDN Source: https://github.com/ethantw/han/blob/master/README-en.md Include the Han.js script file from a CDN. This script handles DOM-ready rendering when the 'han-init' class is applied to the html tag. ```html ``` -------------------------------- ### Include Han.css via CDN Source: https://github.com/ethantw/han/blob/master/README-en.md Include the Han.css stylesheet from a CDN for quick use. Ensure it's placed before other styles or imported via Sass/Stylus for proper functionality. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.