Format特殊格式文本
虽然原生标签自带了一些文本格式,但是对于某些特殊格式的文本还是需要用户自行通过css或js来设定;format组件目前支持若干特殊格式文本,包括拼音、断行、数学公式、前缀和后缀。
前言
我们常见的是行文本和段落文本,但是我也会见到一些不常见的格式文本,例如有拼音头的中文,复杂的数学公式等。我们通过ax-format
自定义组件方便用户创建某些特殊的格式文本。
拼音
关于创建拼音,我们可以使用原生的ruby+rt
两个标签来创建,但是写起来甚是麻烦,使用ax-format
组件来创建拼音文本就会方便很多。
使用ax-format创建拼音文本,至少需要填写两个属性:type
和rts
,type表示特殊文本类型,rts表示拼音组。
rts值有两种写法
- 使用英文逗号(
,
)隔开单个拼音 - 使用空格(
- 输出
- HTML
-
中国是
世界四大文明古国 世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。 -
内分行
内分行是指在段落内,某几个文字需要并列分行显示。这种特殊文本常见于严谨的官方公文。
内分行可以使用_t-br
样式类创建,也可以通过ax-format组件创建,至少需要填写两个属性:type
和lines
,type表示特殊文本类型,lines表示分行数量。
- 输出
- HTML
-
本次活动由
清华大学北京大学 共同发起。本次活动由
斯坦福大学 共同发起。
清华大学 -
公式
关于文本公式需要先了解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参数 |