All Projects → sivan → Heti

sivan / Heti

Licence: mit
赫蹏(hètí)是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来,可以为网站的读者带来更好的文章阅读体验。

Projects that are alternatives of or similar to Heti

Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-91.72%)
Mutual labels:  typography, scss
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (+18.34%)
Mutual labels:  typography, scss
Interior
Design system for the modern web.
Stars: ✭ 77 (-92.32%)
Mutual labels:  typography, scss
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-89.03%)
Mutual labels:  typography, scss
Scsscale
Typographic modular scale starter based on body's font-size built on SCSS.
Stars: ✭ 206 (-79.46%)
Mutual labels:  typography, scss
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Stars: ✭ 380 (-62.11%)
Mutual labels:  typography, scss
Centurion
Centurion is a web-based framework for rapid prototyping and building larger web projects.
Stars: ✭ 327 (-67.4%)
Mutual labels:  typography, scss
Bojler
Bojler is an email framework
Stars: ✭ 885 (-11.76%)
Mutual labels:  typography, scss
Tic Tac Vue
A simple Tic-Tac-Toe game written in Vue.
Stars: ✭ 29 (-97.11%)
Mutual labels:  scss
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-96.51%)
Mutual labels:  scss
Awesome Typography
✏︎ Curated list about digital typography 🔥
Stars: ✭ 947 (-5.58%)
Mutual labels:  typography
Charming
😎 Lettering.js in vanilla JavaScript
Stars: ✭ 954 (-4.89%)
Mutual labels:  typography
Mailgo
💌 mailgo, a new concept of mailto and tel links
Stars: ✭ 978 (-2.49%)
Mutual labels:  scss
Blazm.components
A few useful and awesome components for Blazor. Blazor + awesome (azm)=Blazm (Blossom)
Stars: ✭ 29 (-97.11%)
Mutual labels:  scss
Attila
Ghost Theme
Stars: ✭ 989 (-1.4%)
Mutual labels:  scss
Slate
Beautiful static documentation for your API
Stars: ✭ 33,447 (+3234.7%)
Mutual labels:  scss
Mozilla Iot.github.io
Mozilla IoT Website
Stars: ✭ 21 (-97.91%)
Mutual labels:  scss
Bennett
My portfolio at https://bennettfeely.com
Stars: ✭ 997 (-0.6%)
Mutual labels:  scss
Chalk
Chalk is a high quality, completely customizable, performant and 100% free Jekyll blog theme.
Stars: ✭ 987 (-1.6%)
Mutual labels:  scss
Google Type
Collaborative typography project using select passages from Aesop's Fables set to Google Fonts
Stars: ✭ 971 (-3.19%)
Mutual labels:  typography

赫蹏

赫蹏(hètí)是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来,可以为网站的读者带来更好的文章阅读体验。

预览:https://sivan.github.io/heti/

Preview

主要特性:

  • 贴合网格的排版;
  • 全标签样式美化;
  • 预置古文、诗词样式;
  • 预置多种排版样式(行间注、多栏、竖排等);
  • 多种预设字体族(仅限桌面端);
  • 简/繁体中文支持;
  • 自适应黑暗模式;
  • 中西文混排美化,不再手敲空格👏(基于 JavaScript 脚本);
  • 全角标点挤压(基于 JavaScript 脚本);
  • 兼容 normalize.cssCSS Reset 等常见样式重置;
  • 移动端支持;
  • ……

总之,用上就会变好看。

使用方法

  1. 在页面的 <head> 标签中引入 heti.css 文件:
    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
    
  2. 在要作用的容器元素上增加 class="heti" 的类名即可:
    <article class="entry heti">
      <h1>我的世界观</h1>
      <p>有钱人的生活就是这么朴实无华,且枯燥</p>
      ……
    </article>
    
  3. 使用增强脚本(可选):
    <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
    <script>
      const heti = new Heti('.heti');
      heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
    </script>
    

WIP

暂时没什么想做的了。

  • [x] 自适应黑暗模式
  • [x] 标点挤压
  • [x] 中、西文混排
  • [x] 繁体中文支持
  • [x] 诗词版式
  • [x] 行间注版式

-- EOF --

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