Beautiful and practical! Blow up this Chinese typesetting open source project

I'm coming, I'm coming.

Among the brothers who follow the old shopping, many people’s blogs are directly hosted by GitHub Pages. The name of the blog website is generally: xxxx.github.io, but the website that you make by yourself is really not very beautiful, although it can be built with the help of hexo. A lot of website styles still can’t catch your eyes, right?

Today I would like to recommend a niche GitHub project: He Wei, a very beautiful and practical open source project with super nice Chinese layout style.

赫蹏 (hètí) is a typographic enhancement designed specifically for Chinese content display. It is based on the prevailing Chinese typography norms, which can bring a better article reading experience for website readers.

1. Main features

Main features:

  • Typesetting that fits the grid;

  • Full label style beautification;

  • Preset styles of ancient prose and poetry;

  • Preset multiple layout styles (note between lines, multiple columns, vertical layout, etc.);

  • Multiple preset font families (desktop only);

  • Simplified/Traditional Chinese support;

  • Adaptive dark mode;

  • Mixed Chinese and Western languages ​​to beautify, no longer hand typing spaces???? (based on JavaScript script);

  • Full-width punctuation squeeze (based on JavaScript script);

  • Compatible with normalize.css , CSS Reset and other common style resets;

  • Mobile support;

  • ……

In addition, it also supports the following features:

  • Adaptive dark mode

  • Punctuation

  • Mixed Chinese and Western

  • Traditional Chinese support

  • Poetry layout

  • Line Note Layout

2.  Effect picture

In short, it will look better when used. Come and enjoy the renderings:

The following is the preview effect.

Preview link: https://sivan.github.io/heti/

Change font

Add grid

Night mode

3. How to  use

The method of use is as follows:

<head> Introduce the heti.css file in the label of the  page  :

<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">

Add class="heti" the class name to the container element to  be used:

<article class="entry heti">
  <h1>我的世界观</h1>
  <p>有钱人的生活就是这么朴实无华,且枯燥</p>
  ……
</article>

Use enhanced script (optional):

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
</script>

Does it feel great?

4.  Download address

I put the download address in the background, follow the WeChat public account "Wander around GitHub", and reply "Typesetting" in the background to get the download link 

By the way, if you have an open source and high-quality GitHub project, welcome to recommend it to me. The premise is that it is high-quality. I believe that you will always visit my traffic and let the Star of your project.

推荐阅读
0. 逛逛GitHub交流群限时加入
1. 微软给 Win10 量身打造的效率神器
2. CentOS 7 安装教程(图文详解)
3. 如何提升 B站 等级?
4. 你用过这款软件吗?

Guess you like

Origin blog.csdn.net/weixin_47080540/article/details/110459507