Text
Category: BasicThe text formatting styles were previously scattered across CSS and native HTML tags, making them inconvenient to use. This framework has now integrated commonly used text formats into CSS, standardiz...
Preface
Default text automatically inherits the body's primary color without additional decorations. For convenient use of styled text, this framework has designed several text-related styles.
Colors
Use the framework's color system to change text color: _c, _c-prim (same as _c), _c-error, _c-warn, _c-succ, _c-info, _c-issue, _c-text, _c-brief, _c-caption. Append suffixes like -bd (border shorthand), -sd (shadow shorthand), or -bg (background shorthand) to use the corresponding color effects.
For more complex color needs, refer to the Color API.
- Output
- HTML
-
(normal) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-prim) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-error) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-succ) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-info) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-warn) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-issue) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-text) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-brief) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(_c-caption) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
-
Decoration Lines
The text-decoration and text-emphasis properties can set text decoration lines. For convenience, this framework provides improved styling through _t-* classes:
_t-wv: Sets a wavy underline (wv = wave shorthand), same effect as the<cite>tag_t-lt: Sets a top line (lt = line-top shorthand)_t-lc: Sets a strikethrough (lc = line-center shorthand)_t-lb: Sets a bottom underline (lb = line-bottom shorthand)_t-em: Sets small emphasis dots above text (em = emphasize shorthand), same effect as the<em>tag
- Output
- HTML
-
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
-
Letter Casing
Chinese doesn't have letter case requirements, but pinyin or English text may need case differentiation or title case. This framework provides styling classes:
_t-upc: UPPERCASE text (upc = uppercase shorthand)_t-lwc: lowercase text (lwc = lowercase shorthand)_t-cap: Title Case Text (cap = capital shorthand)
- Output
- HTML
-
Natural history
Natural history
Natural history
-
Center-Spread Effect
Normal body text typically doesn't need letter spacing, but special cases (like section titles) may require spaced-out characters for decorative emphasis.
Apply the _t-diffuse class for this effect. Custom spacing can be achieved using size suffixes from xxs to xxl:
_t-diffuse-xxs: 0.6em spacing_t-diffuse-xs: 0.8em spacing_t-diffuse-sm: 1em spacing_t-diffuse-md: 1.4em spacing (same as_t-diffuse)_t-diffuse-lg: 1.8em spacing_t-diffuse-xl: 2.4em spacing_t-diffuse-xxl: 2.8em spacing
Note: Using _t-diffuse[-*] automatically centers and spreads the text.
- Output
- HTML
-
the Great Wall 长城the Great Wall 长城the Great Wall 长城the Great Wall 长城the Great Wall 长城the Great Wall 长城the Great Wall 长城the Great Wall 长城
-
Increased Word Spacing
To purely increase spacing between words (not characters), use the _t-blank[-*] classes:
_t-blank-xxs: 0.6em spacing_t-blank-xs: 0.8em spacing_t-blank-sm: 1em spacing_t-blank-md: 1.4em spacing (same as_t-blank)_t-blank-lg: 1.8em spacing_t-blank-xl: 2.4em spacing_t-blank-xxl: 2.8em spacing
- Output
- HTML
-
E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰E N G L A N D 英 格 兰
-
Decorative Tags
This framework modifies several native tags including <em>, <ruby>, <mark>, <cite>, <blockquote>, <address>, and <time>, which can be mixed with unmodified native tags.
- Output
- HTML
-
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago. By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun.
Earth's atmosphere and
oceans
were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind. -
Inline Line Breaks
Use the _t-br class for internal line breaks within text (common in official documents).
Works perfectly for two lines, but for three or more lines, middle lines may not right-align properly (currently no solution).
- Output
- HTML
-
Do you likeapple
bananaor other...Do you likebanana
appleor other... -
Non-Selectable Text
Use the unselectable attribute to make text non-selectable.
- Output
- HTML
-
(selectable) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
(unselectable) The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
-
Non-Interactive Text
Use the disabled attribute to make text non-clickable (clicks pass through to underlying elements), though keyboard events remain enabled.
- Output
- HTML
Fully Disabled
Use the inert attribute to make text completely non-interactive (no mouse/keyboard events), rendering it as static display-only content. This is a stronger version of disabled.
This attribute works on any element, but form elements should still use disabled.
- Output
- HTML
Non-Cascading Scroll
Mousewheel events typically trigger page scrolling. Adding the dedicated attribute prevents this, limiting scrolling to the current element only.
- Output
- HTML
-
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.
-
Forced Line Breaking
Western characters may overflow containers unpredictably. Add the hyphenated attribute to enable breaking. To show hyphen - at line breaks, set the lang attribute on either the <html> tag or target element.
- Output
- HTML
-
Earth is the third planet from the Sun and the only astronomical object known to harbor life. This is enabled by Earth being an ocean world, the only one in the Solar System sustaining liquid surface water. Almost all of Earth's water is contained in its global ocean, covering 70.8% of Earth's crust. The remaining 29.2% of Earth's crust is land, most of which is located in the form of continental landmasses within Earth's land hemisphere.
-
Text Blocks
Predefined text blocks with built-in font sizes and line heights:
_t-huge: Extra-large display text (typically one per page) - 48px/72px_t-display: Page headline text (article titles) - 32px/48px_t-title: Major headings - 28px/40px_t-subtitle: Sub-headings - 18px/32px_t-lead: Standard headings - 16px/32px_t-body: Body text - 14px/24px_t-caption: Small text - 12px/18px
Text blocks prioritize readability with different weights. For multi-line text with ellipsis handling, click here.
- Output
- HTML
-
Default, font size: 14px, line height: 24px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Display, font size: 32px, line height: 48px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Title, font size: 28px, line height: 40px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets.Subtitle, font size: 18px, line height: 32px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Lead, font size: 16px, line height: 32px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Body, font size: 14px, line height: 24px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Caption, font size: 12px, line height: 18px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. Water vapor from these sources condensed into the oceans, augmented by water and ice from asteroids, protoplanets, and comets. Sufficient water to fill the oceans may have been on Earth since it formed. In this model, atmospheric greenhouse gases kept the oceans from freezing when the newly forming Sun had only 70% of its current luminosity. By 3.5 Ga, Earth's magnetic field was established, which helped prevent the atmosphere from being stripped away by the solar wind.Huge, font size: 48px, line height: 72px
Earth's atmosphere and oceans were formed by volcanic activity and outgassing. -