npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

han-css

v3.3.0

Published

The CSS typography framework optimised for Hanzi

Downloads

474

Readme

漢字標準格式

「漢字標準格式」是一個集「語意樣式標準化」「文字設計」「高階排版功能」三大概念的Sass/Stylus、JavaScript排版框架。其專為漢字網頁提供的美觀而標準化的環境,不僅符合傳統閱讀習慣、更為螢幕閱讀提供了既成標準,得以完整解決現今漢字網頁設計的排版需求。

「漢字標準格式」完整支援繁體中文、簡體中文及日文等三個採用漢字的語言文字。

[檢視範例測試頁] (http://ethantw.github.io/Han/latest/)

安裝

  • NPM npm install --save han-css
  • Bower bower install --save Han
  • Rails gem install 'hanzi-rails'詳細說明

定製

「漢字標準格式」提供多項定製功能,可經由變數設定、模組引用等方式定製專屬的樣式表。詳情請見使用手冊

使用CDN文件

若毋須特別定製,你也可以直接使用以預設値編譯的CDN外連樣式表、腳本及網頁字體,以求高速下載及快取。此服務由cdnjs.com提供

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

Web字體,

  • 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

使用方式

  1. 在網頁所有樣式表引用經編譯的han.min.css(或使用Sass/Stylus匯入)。
  2. 依需求選用腳本han.min.js,並在<html>元素標籤上加入類別han-init以啓用DOM-ready渲染。
  3. 或依需求定製渲染方式,詳見使用手冊

可選用的腳本

「漢字標準格式」具低耦合、高度語意化等特性,樣式表與腳本各司其職、相互依賴性極低,並有多級樣式回退(fallback),故可依需求選用腳本。

常見問題

瀏覽器支援

  • Chrome(最新版)
  • Edge(最新版)
  • Firefox(最新版)
  • Firefox ESR+
  • Internet Explorer 11
  • Opera(最新版)
  • Safari 9

開發需求與指令

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

下列清單展示了部分常用的開發指令,

  • 安裝需要的開發模組:sudo npm install
  • 啓動開發環境:npm startgulp dev(包含本機運行及自動編譯)
  • 編譯發布文件:gulp build
  • 測試han.jsAPI:gulp test(PhantomJS)
  • 更新依賴模組:sudo npm update && gulp dep

「漢字標準格式」版本:v3.3.0
本頁最後修改於:2016-3-19 00:11(UTC+8)