Format特殊格式文本

2024-06-19 10:16:26首发，3周前更新

虽然原生标签自带了一些文本格式，但是对于某些特殊格式的文本还是需要用户自行通过css或js来设定；format组件目前支持若干特殊格式文本，包括拼音、断行、数学公式、前缀和后缀。

前言

我们常见的是行文本和段落文本，但是我也会见到一些不常见的格式文本，例如有拼音头的中文，复杂的数学公式等。我们通过ax-format自定义组件方便用户创建某些特殊的格式文本。

拼音

关于创建拼音，我们可以使用原生的ruby+rt两个标签来创建，但是写起来甚是麻烦，使用ax-format组件来创建拼音文本就会方便很多。

使用ax-format创建拼音文本，至少需要填写两个属性：type和rts，type表示特殊文本类型，rts表示拼音组。

rts值有两种写法

使用英文逗号（,）隔开单个拼音
使用空格（）隔开单个拼音

附带声调的拼音韵母：a、ā、á、ǎ、à；o、ō、ó、ǒ、ò；e、ē、é、ě、è；i、ī、í、ǐ、ì；ū、ú、ǔ、ù；ü、ǖ、ǘ、ǚ、ǜ。

输出
HTML

中国是世界四大文明古国世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

内分行

内分行是指在段落内，某几个文字需要并列分行显示。这种特殊文本常见于严谨的官方公文。

内分行可以使用_t-br样式类创建，也可以通过ax-format组件创建，至少需要填写两个属性：type和lines，type表示特殊文本类型，lines表示分行数量。

输出
HTML

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

本次活动由斯坦福大学
清华大学共同发起。
```
                
                
            
```

内分行是由css控制的，由于css标准的不足，内分行效果会有点差强人意。例如当第一行字数少于第二行时，会导致第一行右侧不能对齐。

公式

关于文本公式需要先了解Tax、Latex和Katext，用户可自行网上查阅资料。ax-format使用Katext作为公式文本渲染器，请确保页面引入了相应的css和js文件。

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

在使用ax-format创建公式文本时，只需要使用属性type=latext即可。

输出
HTML

中国是世界四大文明古国之一，frac{1}{sqrt{a}}=frac{sqrt{a}}{a},age 0frac{1}{sqrt{a}}=frac{sqrt{a}}{a},age 0 有着悠久的历史，距今约5000年前，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 以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，S_{n}=na_{1}+frac{n left( n-1 right)}{{2}}d 直至形成多民族国家的大一统局面。
```
                
                
            
```

Latex公式编写方法可自行查找资料，这是一个在线编写Latext公式网站，需要的同学可以点击进入。

文本后缀

我们常见到在某个专有名词后面会跟上一个尾巴，这个尾巴可能是一个图标，也可以是几个小字，这个尾巴起到提示和解释的作用。

通过对ax-format使用type=suffix和info属性和创建一个带尾巴的字符串

如果需要给后缀增加tooltip，可追加tips属性。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

文本前缀

如果需要给文本添加一个前缀图标或者其他文字，可通过对ax-format使用type=prefix和info属性创建。

如果需要给前缀增加tooltip，可追加tips属性。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

Attributes属性

ax-format为自定义标签，其包含的属性如下：

名称	可选值	默认值	说明
type	ruby/break/latex/suffix/prefix	-	特色格式文本类型
label	''	-	原文本
rts	''	-	使用ruby类型的帽子文本
lines	''	2	使用break类型的行数
width	''	-	使用break类型的宽度
size	''	-	使用break类型的字号，例如size=18px
info	''	-	使用prefix/suffix类型的后缀内容
tips	''	-	使用prefix/suffix类型的tips文本
engin	''	'katex.render(label, el)'	必须包含label和el参数