# sivan/heti

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/sivan-heti).**

6,702 stars · 284 forks · SCSS · MIT

## Links

- GitHub: https://github.com/sivan/heti
- Homepage: https://sivan.github.io/heti/
- awesome-repositories: https://awesome-repositories.com/repository/sivan-heti.md

## Topics

`clreq` `css` `scss` `typography`

## Description

Heti is a CSS-based typographic enhancement library for Chinese web content. It applies standard Chinese typesetting rules entirely through stylesheets, without any JavaScript dependencies, handling punctuation compression, character alignment, mixed-script spacing, and baseline grid alignment for both simplified and traditional Chinese characters.

The library distinguishes itself by supporting traditional vertical text layout flowing from top to bottom and right to left, alongside horizontal reading directions, using CSS Grid and writing-mode properties. It provides automatic dark mode adaptation through CSS media queries, preset desktop font family selection, and interlinear annotation placement for commentary alongside main text. Classical Chinese poetry and prose receive specialized formatting that preserves traditional layout and rhythm.

Additional capabilities include multi-column content arrangement using CSS column-count and column-width properties, automatic spacing between Chinese characters and Latin letters or digits, and punctuation compression through CSS pseudo-elements and letter-spacing adjustments. The system applies pre-designed typographic rules to all HTML tags used in Chinese content, removing the need for manual styling.

## Tags

### User Interface & Experience

- [CSS-Only](https://awesome-repositories.com/f/user-interface-experience/typographic-enhancements/css-only.md) — Applies Chinese typographic rules entirely through CSS stylesheets without JavaScript dependencies.
- [Mixed-Language Spacing Rules](https://awesome-repositories.com/f/user-interface-experience/container-spacing/mixed-language-spacing-rules.md) — Automatically inserts spacing between Chinese characters and Latin letters or digits for readability.
- [Chinese Font Fallback Stacks](https://awesome-repositories.com/f/user-interface-experience/font-configurations/font-configurators/system-font-stacks/chinese-font-fallback-stacks.md) — Defines font-family stacks prioritizing Chinese fonts with Western fallbacks for mixed-language text.
- [Vertical Text Layout Preservers](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support/vertical-text-layout-preservers.md) — Lays out Chinese text in traditional vertical columns flowing top-to-bottom and right-to-left. ([source](https://sivan.github.io/heti/))
- [Writing-Mode Property Controls](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/css-logical-properties/writing-mode-property-controls.md) — Controls horizontal and vertical text flow using the CSS writing-mode property for layout direction switching.
- [Vertical Text Layout Engines](https://awesome-repositories.com/f/user-interface-experience/vertical-text-layout-engines.md) — Arranges Chinese text in traditional vertical columns flowing top-to-bottom and right-to-left.
- [CSS Grid Vertical Layouts](https://awesome-repositories.com/f/user-interface-experience/vertical-text-layout-engines/css-grid-vertical-layouts.md) — Implements vertical text columns using CSS Grid for traditional Chinese reading direction.
- [Chinese Typographic Grids](https://awesome-repositories.com/f/user-interface-experience/character-encoding-support/chinese-character-support/chinese-typographic-grids.md) — Aligns Chinese characters to a baseline grid for consistent, readable text positioning. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))
- [Vertical Column Layouts](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/vertical-column-layouts.md) — Splits Chinese content into multiple vertical columns using CSS column-count and column-width. ([source](https://sivan.github.io/heti/))
- [CSS Column-Count Multi-Column Layouts](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/vertical-column-layouts/css-column-count-multi-column-layouts.md) — Provides CSS-based multi-column layout for Chinese text using column-count and column-width properties.
- [Media Query Dark Mode Detections](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies/media-query-dark-mode-detections.md) — Detects system dark mode via CSS media queries and switches typographic styles without JavaScript.
- [Typography Dark Mode Adaptation](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies/typography-dark-mode-adaptation.md) — Automatically switches Chinese typographic styles when the system requests a dark color scheme.
- [CSS Custom Property Bindings](https://awesome-repositories.com/f/user-interface-experience/styled-properties/css-custom-property-bindings.md) — Uses CSS custom properties to expose typographic settings for runtime theme switching.
- [Punctuation Compression Injections](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/structural-pseudo-class-variants/pseudo-element-injections/punctuation-compression-injections.md) — Compresses full-width punctuation spacing using CSS pseudo-elements and letter-spacing adjustments.
- [Layout Direction Switchers](https://awesome-repositories.com/f/user-interface-experience/vertical-text-layout-engines/layout-direction-switchers.md) — Switches Chinese text between vertical and horizontal reading directions via CSS writing-mode. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))

### Web Development

- [Chinese Typographic Conventions](https://awesome-repositories.com/f/web-development/web-typography-integration/chinese-typographic-conventions.md) — Applies standard Chinese typographic rules to web content entirely through CSS stylesheets.

### Content Management & Publishing

- [Chinese Typographic Conventions](https://awesome-repositories.com/f/content-management-publishing/chinese-documentation-standards/chinese-typographic-conventions.md) — Follows standard Chinese typographic rules to make web content more readable for Chinese readers. ([source](https://sivan.github.io/heti/))
- [CSS-Based](https://awesome-repositories.com/f/content-management-publishing/chinese-typesetting-systems/css-based.md) — Provides a pure CSS library that applies standard Chinese typesetting rules to web content.
- [Interlinear Annotations](https://awesome-repositories.com/f/content-management-publishing/digital-content-annotations/interlinear-annotations.md) — Ships CSS-based interlinear annotation placement for commentary alongside Chinese text. ([source](https://sivan.github.io/heti/))
- [Chinese Poetry Stylers](https://awesome-repositories.com/f/content-management-publishing/randomized-content-generators/poetry-generators/chinese-poetry-stylers.md) — Applies specialized layout for Chinese poetry that centers verses and supports poetic structure. ([source](https://sivan.github.io/heti/))
- [Classical Chinese Poetry Formatters](https://awesome-repositories.com/f/content-management-publishing/randomized-content-generators/poetry-generators/classical-chinese-poetry-formatters.md) — Provides ready-made styles for classical Chinese prose and poetry preserving traditional layout and rhythm. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))

### Data & Databases

- [Chinese-Western Text Spacers](https://awesome-repositories.com/f/data-databases/text-processing-utilities/text-extraction/text-segmentation/chinese-language-segmenters/chinese-text-moderation/chinese-text-matchers/chinese-western-text-spacers.md) — Inserts automatic spacing between Chinese characters and Latin letters or digits for mixed-language typography.
- [Simplified](https://awesome-repositories.com/f/data-databases/text-processing-utilities/text-extraction/text-segmentation/chinese-language-segmenters/traditional-chinese-support/simplified.md) — Applies correct typographic rules for both simplified and traditional Chinese characters without extra configuration. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))
- [Chinese HTML Tag Stylers](https://awesome-repositories.com/f/data-databases/text-processing-utilities/text-extraction/text-segmentation/chinese-pos-tagging/chinese-html-tag-stylers.md) — Applies pre-designed typographic rules to every HTML tag used in Chinese content. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))
- [Classical Chinese Poetry Formatters](https://awesome-repositories.com/f/data-databases/classical-chinese-literature-datasets/classical-chinese-poetry-formatters.md) — Provides ready-made CSS styles for classical Chinese poetry and prose that preserve traditional layout.
- [Classical Chinese Text Formatters](https://awesome-repositories.com/f/data-databases/classical-chinese-literature-datasets/classical-chinese-text-formatters.md) — Provides ready-made CSS styles for classical Chinese poetry and prose that preserve traditional layout.
- [Classical Chinese Text Stylers](https://awesome-repositories.com/f/data-databases/classical-chinese-literature-datasets/classical-chinese-text-stylers.md) — Applies specialized layout for classical Chinese prose with traditional formatting and spacing. ([source](https://sivan.github.io/heti/))

### Software Engineering & Architecture

- [Punctuation Enforcement](https://awesome-repositories.com/f/software-engineering-architecture/coding-standards-enforcement/punctuation-enforcement.md) — Reduces space around Chinese punctuation marks for tighter, more professional typesetting. ([source](https://sivan.github.io/heti/))
- [Full-Width Punctuation Compressions](https://awesome-repositories.com/f/software-engineering-architecture/coding-standards-enforcement/punctuation-enforcement/full-width-punctuation-compressions.md) — Reduces space around full-width punctuation marks for natural placement within Chinese text. ([source](https://cdn.jsdelivr.net/gh/sivan/heti@master/README.md))