You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ky...@apache.org on 2018/12/26 13:59:06 UTC
[incubator-weex-site] branch draft updated: * Update text-style.md
(#275)
This is an automated email from the ASF dual-hosted git repository.
kyork pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push:
new e033d6c * Update text-style.md (#275)
e033d6c is described below
commit e033d6c2c934088d9a9bfe03dee6cc663513cd1d
Author: YorkShen <sh...@gmail.com>
AuthorDate: Wed Dec 26 21:59:02 2018 +0800
* Update text-style.md (#275)
---
docs/docs/styles/text-styles.md | 193 +++++++++++--------------------------
docs/zh/docs/styles/text-styles.md | 184 +++++++++--------------------------
2 files changed, 104 insertions(+), 273 deletions(-)
diff --git a/docs/docs/styles/text-styles.md b/docs/docs/styles/text-styles.md
index 11b47b6..ec2322d 100644
--- a/docs/docs/styles/text-styles.md
+++ b/docs/docs/styles/text-styles.md
@@ -1,137 +1,56 @@
-# 文本样式
-
-文本类组件支持一些特殊的 CSS 属性设置文本的样式，如字体、字号、文本颜色等, 这类组件目前包括 `<text>`、 `<input>` 和 `<textarea>`。
-
-## `color`
-
-设置文字颜色，值为色值或颜色关键字，支持 RGB（`rgb(255, 0, 0)`），RGBA（`rgba(255, 0, 0, 0.5)`），十六进制（`#ff0000`），精简写法的十六进制（`#f00`），色值关键字（`red`）。具体可参考 [CSS 颜色单位](./css-units.html#css-颜色单位)。
-
-```html
-<style scope>
-.title {
- color: rgba(0, 0, 0, 0.8);
-}
-.content {
- color: #666;
-}
-</style>
-```
-
-## `lines`
-
-指定文本行数，值为整数。**仅在 `<text>` 组件中支持**。默认值是 `0` 代表不限制行数。
-
-通常与 `text-overflow` 配合限制文本行数，超过则文本末尾显示省略号。
-
-```html
-<style scope>
-.content {
- lines: 3;
- text-overflow: ellipsis;
- color: #666;
-}
-</style>
-```
-
-## `text-overflow`
-
-设置内容超长时的省略样式。**仅在 `<text>` 组件中支持**。通常与 `lines` 配合限制文本行数，超过则文本末尾显示省略号。可选值为：
-
-- `clip`：截断，不做任何处理。
-- `ellipsis`：内容超长时在文本末尾显示省略号。
-
-```html
-<style scope>
-.content {
- lines: 3;
- text-overflow: ellipsis;
- color: #666;
-}
-</style>
-```
-
-## `font-size`
-
-设置文字大小，**仅支持 `px` 单位。**文字默认大小为 36px。
-
-```html
-<style scope>
-.title {
- font-size: 40px;
-}
-</style>
-```
-
-## `font-style`
-
-设置字体类别，可选值 `normal` | `italic`，默认为 `normal`。
-
-```html
-<style scope>
-.title {
- font-style: italic;
-}
-</style>
-```
-
-## `font-weight`
-
-设置字体粗细程度，可选值为 `normal` | `bold` | `100` | `200` | `300` | `400` | `500` | `600` | `700` | `800` | `900`，默认为 `normal`。
-
-- `normal` 等同于 400, `bold` 等同于 700；
-- iOS 支持以上可选值；Android 仅支持 400 和 700，其他值会设为 400 或 700；
-- 暂不支持 `lighter`, `bolder` 等其他值。
-
-```html
-<style scope>
-.title {
- font-weight: bold;
-}
-</style>
-```
-
-## `text-decoration`
-
-设置文本装饰，可选值为：
-
-- `none`：无任何装饰，默认为 `none`。
-- `underline`：文本下划线。
-- `line-through`：文本删除线。
-
-```html
-<style scope>
-.title {
- text-decoration: underline;
-}
-</style>
-```
-
-## `text-align`
-
-设置文本对齐方式，可选值为：
-
-- `left`：左对齐，默认为 `none`。
-- `center`：水平居中对齐。
-- `right`：右对齐。
-
-```html
-<style scope>
-.title {
- text-align: center;
-}
-</style>
-```
-
-## `font-family`
-
-设置文本设置字体，该属性**不保证**在不同平台、不同设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。
-
-```html
-<style scope>
-.title {
- font-family: Arial;
-}
-</style>
-```
-
-该属性可配合 `dom.addRule()` 方法为 `<text>` 设置自定义字体，详情可查看 [`<text>` 组件](/docs/text.html#自定义字体)。
+# Text Style
+
+Text alike components share some common style rules. The text alike components currently includes [`text`](../components/text.html)、[`input`](../components/input.html) and [`richtext`](../components/richtext.html)
+
+## Reference
+### color
+`color`: <colors> this property set the foreground color of an component's text content.
+ * The property `color` support multiple formats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example:
+ ```css
+ .my-class { color: red; }
+ .my-class { color: #f00; }
+ .my-class { color: #ff0000; }
+ .my-class { color: rgb(255, 0, 0); }
+ .my-class { color: rgba(255, 0, 0, 0.5); }
+ ```
+### font-size
+`font-size`: <length> this property specifies the size of the font.
+
+### font-style
+`font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
+
+### font-weight
+This property indicate the weight of the text.
+ * values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
+ * normal is equal to 400, bold equel to 700
+ * default value: `normal`
+ * apply to: `<text>`, `<input>`
+ * ios support showing 9 kind of font-weight.
+ * android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700
+ * Some standard values like `lighter`, `bolder`, number unit are not supported.
+ * The effect not apply to all elements, just `<text>` and `<input>`. In another way, it's not inherited.
+### text-decoration
+`text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
+
+::: warning
+Only support for `<text>` and `<ricthext>`
+:::
+
+### text-align
+`text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
+
+### font-family
+`font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref [dom.addRule](../modules/dom.html) instead.
+
+### text-overflow
+`text-overflow`:<enum> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.
+
+::: warning
+Only support for `<text>` and `<ricthext>`
+:::
+
+### lines
+`lines`: <number> positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value.
+
+### line-height
+`line-height`: <length> The line height of every line in the text. `line-height` is the space between top and bottom. There is no relationship between `line-height` and `font-size`, as `line-height` is restricted by top and bottom, `font-size` is interpreted by glyph. Usually but not always, `line-height` and `font-size` with the same value will cause the text clipped.
diff --git a/docs/zh/docs/styles/text-styles.md b/docs/zh/docs/styles/text-styles.md
index 11b47b6..25d1e1a 100644
--- a/docs/zh/docs/styles/text-styles.md
+++ b/docs/zh/docs/styles/text-styles.md
@@ -1,137 +1,49 @@
# 文本样式
-
-文本类组件支持一些特殊的 CSS 属性设置文本的样式，如字体、字号、文本颜色等, 这类组件目前包括 `<text>`、 `<input>` 和 `<textarea>`。
-
-## `color`
-
-设置文字颜色，值为色值或颜色关键字，支持 RGB（`rgb(255, 0, 0)`），RGBA（`rgba(255, 0, 0, 0.5)`），十六进制（`#ff0000`），精简写法的十六进制（`#f00`），色值关键字（`red`）。具体可参考 [CSS 颜色单位](./css-units.html#css-颜色单位)。
-
-```html
-<style scope>
-.title {
- color: rgba(0, 0, 0, 0.8);
-}
-.content {
- color: #666;
-}
-</style>
-```
-
-## `lines`
-
-指定文本行数，值为整数。**仅在 `<text>` 组件中支持**。默认值是 `0` 代表不限制行数。
-
-通常与 `text-overflow` 配合限制文本行数，超过则文本末尾显示省略号。
-
-```html
-<style scope>
-.content {
- lines: 3;
- text-overflow: ellipsis;
- color: #666;
-}
-</style>
-```
-
-## `text-overflow`
-
-设置内容超长时的省略样式。**仅在 `<text>` 组件中支持**。通常与 `lines` 配合限制文本行数，超过则文本末尾显示省略号。可选值为：
-
-- `clip`：截断，不做任何处理。
-- `ellipsis`：内容超长时在文本末尾显示省略号。
-
-```html
-<style scope>
-.content {
- lines: 3;
- text-overflow: ellipsis;
- color: #666;
-}
-</style>
-```
-
-## `font-size`
-
-设置文字大小，**仅支持 `px` 单位。**文字默认大小为 36px。
-
-```html
-<style scope>
-.title {
- font-size: 40px;
-}
-</style>
-```
-
-## `font-style`
-
-设置字体类别，可选值 `normal` | `italic`，默认为 `normal`。
-
-```html
-<style scope>
-.title {
- font-style: italic;
-}
-</style>
-```
-
-## `font-weight`
-
-设置字体粗细程度，可选值为 `normal` | `bold` | `100` | `200` | `300` | `400` | `500` | `600` | `700` | `800` | `900`，默认为 `normal`。
-
-- `normal` 等同于 400, `bold` 等同于 700；
-- iOS 支持以上可选值；Android 仅支持 400 和 700，其他值会设为 400 或 700；
-- 暂不支持 `lighter`, `bolder` 等其他值。
-
-```html
-<style scope>
-.title {
- font-weight: bold;
-}
-</style>
-```
-
-## `text-decoration`
-
-设置文本装饰，可选值为：
-
-- `none`：无任何装饰，默认为 `none`。
-- `underline`：文本下划线。
-- `line-through`：文本删除线。
-
-```html
-<style scope>
-.title {
- text-decoration: underline;
-}
-</style>
-```
-
-## `text-align`
-
-设置文本对齐方式，可选值为：
-
-- `left`：左对齐，默认为 `none`。
-- `center`：水平居中对齐。
-- `right`：右对齐。
-
-```html
-<style scope>
-.title {
- text-align: center;
-}
-</style>
-```
-
-## `font-family`
-
-设置文本设置字体，该属性**不保证**在不同平台、不同设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。
-
-```html
-<style scope>
-.title {
- font-family: Arial;
-}
-</style>
-```
-
-该属性可配合 `dom.addRule()` 方法为 `<text>` 设置自定义字体，详情可查看 [`<text>` 组件](/docs/text.html#自定义字体)。
+文本类组件共享一些通用样式, 这类组件目前包括 [`<text>`](../components/text.html)、[`<input>`](../components/input.html)和[`<richtext>`](../components/richtext.html)
+
+## 属性
+### color
+`color {color}`：文字颜色，支持如下字段：
+ * RGB（ `rgb(255, 0, 0)` ）
+ * RGBA（ `rgba(255, 0, 0, 0.5)` ）
+ * 十六进制（ `#ff0000` ）；精简写法的十六进制（ `#f00` ）
+ * 色值关键字（`red`）
+### font-size
+`font-size {number}`：文字大小。
+
+### font-style
+`font-style {string}`：字体类别。可选值 `normal` | `italic`，默认为 `normal`。
+
+### font-weight
+`font-weight {string}`：字体粗细程度
+ * 可选值: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
+ * normal 等同于 400, bold 等同于 700；
+ * 默认值: `normal`；
+ * iOS 支持 9 种 font-weight值；Android 仅支持 400 和 700, 其他值会设为 400 或 700
+ * 类似 `lighter`, `bolder` 这样的值暂时不支持
+
+### text-decoration
+`text-decoration {string}`：字体装饰，可选值 `none` | `underline` | `line-through`，默认值为 `none`。
+
+::: warning
+只支持 `<text>` 和 `<ricthext>`
+:::
+
+### text-algin
+`text-align {string}`：对齐方式。可选值 `left` | `center` | `right`，默认值为 `left`。
+
+### font-family
+`font-family {string}`：设置字体。这个设置 **不保证** 在不同平台，设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。如果需要加载自定义字体，请参考相关[dom.addRule](../modules/dom.html)。
+
+### text-overflow
+`text-overflow {string}`：设置内容超长时的省略样式。可选值 `clip` | `ellipsis`
+
+::: warning
+只支持 `<text>` 和 `<ricthext>`
+:::
+
+### lines
+`lines {number}`: 正整数，指定最大文本行数，默认值为0，表示不限制最大行数。如果文本不够长，实际展示行数会小于指定行数。
+
+### line-height
+`line-height {length}`：正整数，每行文字高度。`line-height`是 top 至 bottom 的距离。`line-height`与`font-size`没有关系，因为`line-height`被 top 和 bottom 所限制，`font-size` 被 glyph 所解析。`line-height`和`font-size`相等一般会导致文字被截断。
\ No newline at end of file