Master Chinese Poetry Layout on the Web with Heti

If you need to display an ancient poem on a web page and want a layout similar to traditional Chinese textbooks, the open‑source Heti project provides a quick solution.

Heti (pronounced hètí) originally referred to thin paper used for writing; the project adopts this name to denote a typography style specially designed for Chinese content.

In ancient texts, "赫蹏" meant a small piece of silk or paper used for writing.

Heti offers a range of features:

Grid‑aligned layout

Full tag style beautification

Pre‑set styles for classical literature and poetry

Various layout options (annotations, multi‑column, vertical writing, etc.)

Multiple font families (desktop only)

Simplified/Traditional Chinese support

Adaptive dark mode

Western‑Chinese mixed‑text beautification without manual spacing (via JavaScript)

Punctuation squeezing (via JavaScript)

Compatibility with normalize.css, CSS Reset and other resets

Mobile support

Using Heti is straightforward and requires two steps:

1. Include the Heti CSS file in the page head:

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

2. Add the heti class to the container element you want to style:

<article class="entry heti">
  <h1>TJ君</h1>
  <p>TJ君最棒</p>
  …
</article>

Beyond the basic setup, you can load an optional addon script to enable automatic mixed‑text spacing and punctuation squeezing:

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing(); // auto mixed‑text beautification and punctuation squeezing
</script>

Below are screenshots showing the default style and dark‑mode appearance:

And the dark‑mode view:

If you like the ancient aesthetic, give Heti a try and enhance your Chinese content presentation.