All Projects → ethantw → Han

ethantw / Han

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

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language
livescript
113 projects
HTML
75241 projects

Projects that are alternatives of or similar to Han

Sassy Gridlover
Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Stars: ✭ 223 (-89.66%)
Mutual labels:  typography, sass
Simple Typography
A simple starting ground for beautiful typography on the web using Sass.
Stars: ✭ 311 (-85.58%)
Mutual labels:  typography, sass
Graaf
A collection of pure CSS grids for designing your new projects
Stars: ✭ 186 (-91.37%)
Mutual labels:  typography, sass
Shevy
Configurable Vertical Rhythm & Typography for Sass
Stars: ✭ 177 (-91.79%)
Mutual labels:  typography, sass
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (-44.94%)
Mutual labels:  typography, sass
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Stars: ✭ 380 (-82.37%)
Mutual labels:  typography, sass
Gutenberg
A meaningful web typography starter kit.
Stars: ✭ 2,765 (+28.25%)
Mutual labels:  typography, sass
Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-96.15%)
Mutual labels:  typography, sass
Typi
A sass mixin to make responsive typography easy
Stars: ✭ 862 (-60.02%)
Mutual labels:  typography, sass
Utility Opentype
Simple, CSS utility classes for advanced typographic features.
Stars: ✭ 481 (-77.69%)
Mutual labels:  typography, sass
Personal Goals
List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.
Stars: ✭ 75 (-96.52%)
Mutual labels:  typography, sass
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-94.9%)
Mutual labels:  typography, sass
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-92.81%)
Mutual labels:  sass
Hugo theme pickles
Modern, Simple and beautiful Hugo theme
Stars: ✭ 168 (-92.21%)
Mutual labels:  sass
Bootstrap 4 Boilerplate
Bootstrap 4.3.1 boilerplate with Browsersync, Sass and Gulp.js
Stars: ✭ 155 (-92.81%)
Mutual labels:  sass
Harfbuzz
HarfBuzz text shaping engine
Stars: ✭ 2,206 (+2.32%)
Mutual labels:  typography
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-92.16%)
Mutual labels:  sass
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-92.35%)
Mutual labels:  sass
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (-8.4%)
Mutual labels:  sass
Pychat
webchat via WebSockets/WebRTC that allows messaging/video call/screen sharing
Stars: ✭ 152 (-92.95%)
Mutual labels:  sass

漢字標準格式

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

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

檢視範例測試頁

安裝

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].