You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by GitBox <gi...@apache.org> on 2018/12/26 13:59:04 UTC
[GitHub] YorkShen closed pull request #275: * Update text-style.md
YorkShen closed pull request #275: * Update text-style.md
URL: https://github.com/apache/incubator-weex-site/pull/275
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/docs/docs/styles/text-styles.md b/docs/docs/styles/text-styles.md
index 11b47b6bc..ec2322d65 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 11b47b6bc..25d1e1a58 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
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services