@sinoform/print-out-core v1.18.11

@sinoform/print-out-core

打印输出核心模块。

安装

yarn add @sinoform/print-out-core

CSS 样式表 TODO

• 支持 rem
• line-height 支持 em、rem

为段落设置样式

组件P 和 Run 可以指定样式。Run 组件会从 P 组件自动继承样式。

示例：

<P style={{ fontSize: 20, color: 'red' }}>
  <Text style={{ fontSize: 36 }}>你好，世界！</Text>
  <Text>Hello, World!</Text>
</P>

效果:

目前支持的样式有：

• fontSize - 字体大小 *
• fontWeight - 字重（对应 Word 中的“粗体”）
• fontFamily - 字体 *
• fontStyle - 文本样式（对应 Word 中的“斜体”）
• textAlign - 段落对齐方式 *
• textIndent - 首行缩进
• lineHeight - 行高 *
• marginTop - 上边距
• marginBottom - 下边距
• marginLeft - 左边距
• marginRight - 右边距
• color - 文本颜色 *
• backgroundColor - 背景颜色（对应 Word 中的高亮）*

* 标注的 css 样式规则与标准 css 有一定区别，分章节说明。

fontSize 字体大小

与 css 标准用法一致。

目前支持以下几种类型值：

• 24 - 无单位值。相当于 24px
• 24px - 像素值。
• 18pt - 磅值。（ word 中字体大小的单位）
• 1cm - 厘米。
• 1in - 英寸。
• 1mm - 毫米。

Word 中的字体大小与像素、磅之间换算的对照表：

• 八号: 6px (5pt)
• 七号: 7px (5.5pt)
• 小六: 8px (6.5pt)
• 六号: 10px (7.5pt)
• 小五: 12px (9pt)
• 五号: 14px (10.5pt)
• 小四: 16px (12pt)
• 四号: 18px (14pt)
• 小三: 20px (15pt)
• 三号: 21px (16pt)
• 小二: 24px (18pt)
• 二号: 29px (22pt)
• 小一: 32px (24pt)
• 一号: 34px (26pt)
• 小初: 48px (36pt)
• 初号: 56px (42pt)

fontFamily 字体

可以分别为中文和英文设置字体：

<P
  style={{
    fontFamily: '仿宋_GB2312, "Ink Free"',
  }}
>
  <Text>Hello, World! 你好，世界！</Text>
</P>

fontFamily: '仿宋_GB2312, "Ink Free"' 与标准 css 不太一样，当设置多个字体时，第一个字体对应的是中文文本的字体，第二个字体对应的是英文文本的字体，其他字体忽略。如果只设置一个字体，那么中英文都采用该字体。

textAlign 段落对齐方式

textAlign 支持的值有：

• left - 左对齐
• right - 右对齐
• center - 居中对齐
• justify - 两端对齐
• distribute - 分散对齐 （这是私有的，不是 css 标准的）

lineHeight 行高

与 css 标准用法一致。无单位的值表示是当前字体大小的倍数，而不是 px。请注意。

color 颜色

与 css 标准用法一致。因为 Word 不支持文本透明度，所以会忽略透明度的设置。如：rgba(255, 0, 0, 50) 解析之后是 #FF0000。

支持的颜色值包括：

• red, yellow... - css 标准标量颜色值
• rgb(255, 10, 10), rgba(255, 20, 20, 10) - rgb、rgba 值
• #ff00aa, #ff002211 - hex 颜色值
• hsl(100, 200, 100), hsla(100, 200, 100, 10) - hsl 颜色值

不支持渐变。

backgroundColor 背景色

对应 Word 中的文本高亮。因 Word 高亮本身的限制，只支持以下颜色值：

• black
• blue
• cyan
• darkBlue
• darkCyan
• darkGray
• darkGreen
• darkMegenta
• darkRed
• darkYellow
• green
• lightGray
• magenta
• none
• red
• white
• yellow