Home›Docs›Basic›Text Format Component

Text Format Component

Last updated: 1 month ago

Category: Basic

While native HTML tags provide basic text formatting, certain special text formats still require custom CSS or JavaScript implementations. The format component currently supports several specialized text formats, including pinyin annotations, line breaks, mathematical formulas, prefixes, and suffixes.

Text Format Component1 month ago CSS Comment1 month ago Ellipsis Text2 months ago Text2 months ago Article2 months ago

Introduction

While standard HTML provides basic text formatting, specialized formats like phonetic annotations, mathematical formulas, and localized numbers require custom components.

The <oc-format> component supports these advanced text formatting needs.

Phonetic Annotation (Ruby Text)

Phonetic annotation is commonly used in Chinese, Japanese, and Korean. In certain contexts, Latin texts may also employ phonetic annotation.

While native ruby and rt tags can be used to create phonetic annotations, the process can be quite cumbersome. Using the oc-format component makes creating pinyin-annotated text much more convenient.

To create pinyin-annotated text with oc-format, at least two attributes are required: type and rts. The type attribute specifies the special text format, while rts represents the pinyin groups.

For splitting phonetic annotations, use the following delimiters:

Use commas (,) to separate individual pinyin
Use spaces ( ) to separate individual pinyin

If the phonetic annotation contains neither of these characters, it will not be split.

Output
HTML

中国是世界四大文明古国世界四大文明古国之一。

Caesar in Gallia dixit: Veni, vidi, vici — quod significat celerem victoriam.

昨日東京で美しい夕焼けを見ました。
```
                
                
            
```

Inline Line Breaks

Inline line breaks refer to the display of certain text elements in parallel lines within a paragraph. This special text formatting is commonly found in formal official documents.

Inline line breaks can be created using either the _t-br CSS class or through the oc-format component.

At least two attributes are required: type and lines. The type attribute specifies the special text format, while lines indicates the number of parallel lines.

The same processing logic applies.

Output
HTML

本次活动由清华大学北京大学共同发起。

This event is jointly initiated by Stanford University
Tsinghua University.
```
                
                
            
```

Inline line breaks are controlled by CSS. Due to limitations in CSS standards, the rendering of inline line breaks may be somewhat unsatisfactory. For example, when the first line has fewer characters than the second line, it may result in misalignment on the right side of the first line.

Formulas

To understand text formulas, you should first familiarize yourself with TeX, LaTeX, and KaTeX. Users may research these online.

The oc-format component uses KaTeX as its formula text renderer. Please ensure the corresponding CSS and JS files are properly imported on your page.

    
            <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
            <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>

Use type="latex" with LaTeX formula syntax.

Output
HTML

The oldest material found in the Solar \frac{1}{\sqrt{a}}=\frac{\sqrt{a}}{a},a\ge 0\frac{1}{\sqrt{a}}=\frac{\sqrt{a}}{a},a\ge 0 System is dated to 4.5682 Ga (billion years) ago. \int \frac{1}{1+x^{2}}\mathrm{d}x= \arctan x +C f(x) = \int_{-\infty}^\infty \hat f(x)\xi\,e^{2 \pi i \xi x} \,\mathrm{d}\xi By 4.54±0.04 Ga the primordial Earth had formed. The bodies in the Solar System formed and evolved with the Sun. In theory, a solar nebula partitions a volume out of a molecular cloud by gravitational collapse, which begins to spin and flatten into a S_{n}=na_{1}+\frac{n \left( n-1 \right)}{{2}}d circumstellar disk, and then the planets grow out of that disk with the Sun. A nebula contains gas, ice grains, and dust (including primordial nuclides). According to nebular theory, planetesimals formed by accretion, with the primordial Earth being estimated as likely taking anywhere from 70 to 100 million years to form.
```
                
                
            
```

For LaTeX formula writing methods, you may refer to relevant documentation. Here is an online LaTeX formula editor website for those who need it: click to access.

Adding Suffixes

We often see a small piece of text inserted after a specific term. This text could be an icon or a few small characters, serving as a prompt or explanation.

By using type="suffix" and the suffix attribute with oc-format, you can create a string with suffix text.

The suffix attribute requires either:

Object format: suffix="{content:'suffix text'}"
Text format: suffix="suffix text"

Key features:

Supports both plain text and icon content
Maintains semantic relationship with the main text

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

To add hover tooltips to suffix text, append the tips attribute to the suffix property. For example:

Basic tooltip:
suffix="{content:'Suffix text',tips:'Tooltip text'}"
Advanced tooltip with customization:
suffix="{content:'Suffix text',tips:{content:'Custom tooltip',theme:'light'}}"

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

Prefixes

Similar to suffixes but appears before content:

type="prefix"
Same prefix attribute format as suffixes

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

To add hover tooltips to prefix text, append the tips attribute to the prefix property. For example:

Basic tooltip:
prefix="{content:'Suffix text',tips:'Tooltip text'}"
Advanced tooltip with customization:
prefix="{content:'Suffix text',tips:{content:'Custom tooltip',theme:'light'}}"

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

Number Localization

Number localization refers to formatting numeric values according to local conventions, including thousands separators and decimal points.

To implement this, apply type="localenum" to the oc-format component.

Note:

The label value must be a computable number (e.g., 1234567).
Avoid scientific notation (e.g., 1.23e6) or pre-formatted numbers with separators (e.g., 1,234,567).

Output
HTML

This shipment totals 7896513.12KG。
```
                
                
            
```

By default, the local language is retrieved from the browser settings. If unavailable, numbers will be formatted in English (en-US) as fallback.

To specify a locale explicitly, use the locale attribute with these supported values:

locale="de-DE": German

Thousands separator: .
Decimal separator: ,

locale="fr-FR": French

Thousands separator: (space)
Decimal separator: .

locale="de-CH": Swiss German

Thousands separator: '
Decimal separator: .

locale="sv-SE": Swedish

Thousands separator: (space)
Decimal separator: ,

locale="en-US": English (US standard)

Thousands separator: ,
Decimal separator: .

Output
HTML

The total weight of this shipment is 7896513.12 kg (German localization).

The total weight of this shipment is 7896513.12 kg (French localization).

The total weight of this shipment is 7896513.12 kg (Swiss localization).

The total weight of this shipment is 7896513.12 kg (Swedish localization).
```
                
                
            
```

Disabling Number Localization

The inverse operation of number localization — converts locale-formatted numbers (with thousands separators) back to plain computable numbers, while normalizing non-standard decimal separators to ISO-compliant format.

Implementation:
Apply type="plainnum" to the oc-format component.

Requirements:

The label value must be a localized number containing:
- Thousands separators (e.g., 1,234,567 or 1.234.567)
- Locale-specific decimal symbols (e.g., 1,23 or 1.23)

Output:

Removes all formatting (e.g., converts 1,234.56 → 1234.56)
Standardizes decimals to . (e.g., 1,23 → 1.23)

Output
HTML

This shipment totals 7,896,513.12KG。
```
                
                
            
```

By default, the system:

Removes thousands separators and converts decimal symbols according to the browser's locale settings
Falls back to English number formatting rules (en-US) if locale detection fails

When the input label's localization rules are known, explicitly declare the source format using the locale attribute:

Output
HTML

This shipment totals 7.896.513,12 KG (German format).

This shipment totals 7 896 513,12 KG (French format).

This shipment totals 7’896’513.12 KG (Swiss format).

This shipment totals 7 896 513,12 KG (Swedish format).
```
                
                
            
```

Zero Padding for Numbers

If the label is a number (or a number with thousand separators), you can apply zero-padding formatting.

Zero-padding comes in two types:

Leading zero padding: type="padstart" (for integer portion)
Trailing zero padding: type="padend" (for decimal portion)

Default behavior:
Pads zeros to a length of 2 digits if no specific length is provided.

Output
HTML

The batch number for this shipment is PT6, with a total weight of 13.1 tons.
```
                
                
            
```

To specify the number of zero-padding digits, use the places attribute.

Output
HTML

The batch number for this shipment is PT6, with a total weight of 13.1 tons.
```
                
                
            
```

Attributes

Attribute	Values	Default	Description
type	'ruby' / 'break' / 'latex' / 'suffix' / 'prefix' 'localenum' / 'plainnum' / 'padstart' / 'padend'	-	Special formatted text type
label	''	-	Original text content
rts	''	-	Ruby text (for type="ruby")
lines	''	'2'	Number of lines (for type="break")
width	''	-	Width (for type="break")
size	''	-	Font size (e.g. size="18px")
suffix	''	{content:''}	Suffix content
prefix	''	{content:''}	Prefix content
locale	''	'en-US'	Locale for number formatting
places	''	'2'	Zero-padding digits
engin	''	'katex.render(label, el)'	Must include label and el parameters

Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

Category Component

1 month ago

Group Button