You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by mo...@apache.org on 2019/01/04 02:43:54 UTC
[incubator-weex-site] branch draft updated: Rewrite text docs and
add iconfont instructions.
This is an automated email from the ASF dual-hosted git repository.
moshen 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 c82d8bd Rewrite text docs and add iconfont instructions.
c82d8bd is described below
commit c82d8bdb29b6385e8560b7fa7961a2a8804a86c6
Author: wqyfavor <qi...@taobao.com>
AuthorDate: Fri Jan 4 10:43:44 2019 +0800
Rewrite text docs and add iconfont instructions.
---
docs/docs/components/text.md | 71 ++++++++++++++-----------
docs/docs/images/CustomFontface_badcase.png | Bin 0 -> 54306 bytes
docs/docs/styles/text-styles.md | 2 +-
docs/zh/docs/components/text.md | 63 +++++++++++++---------
docs/zh/docs/images/CustomFontface_badcase.png | Bin 0 -> 54306 bytes
5 files changed, 79 insertions(+), 57 deletions(-)
diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md
index 4ec4c67..60613d9 100644
--- a/docs/docs/components/text.md
+++ b/docs/docs/components/text.md
@@ -2,53 +2,64 @@
## Summary
-The weex builtin component 'text' is used to render text with specified style rule.
+`<text>` is used to render text with specified styles.
> **Note:** This component supports no child components.
-> **Note:** The heading and trailing white space will be ignored. If this is not what you need, you can set text using the data-binding method above.
+> **Note:** The heading and trailing white spaces will be ignored. If this is not what you need, you can set text using data-binding method demonstrated below.
## Styles
-* Support [common styles for components](../styles/common-styles.html)
-* Support [text style](../styles/text-styles.html)
+* Support [common styles](../styles/common-styles.html)
+* Support [text styles](../styles/text-styles.html)
## Attributes
Except for dynamic text, there is no other supported attributes for text.
-### dynamic text
-One can use the following code snippet to bind the content of text to a variable
-
- <template>
- <div>
- <text >{{content}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: function(){
- return {
- content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
- }
- }
+
+### Dynamic text
+One can use the following code snippet to bind the content of text to a variable.
+
+```html
+<template>
+ <div>
+ <text >{{content}}</text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ data: function(){
+ return {
+ content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework."
}
- </script>
+ }
+}
+</script>
+```
## Events
-Support [common events](../events/common-events.html)
+* Support [common events](../events/common-events.html)
## Other
-### The magic of text height
-The rules for computed height of text component is complicated, basically but not always, text in weex obey the following rules in order:
+### Text height
+The rules for computed height of text component is complicated, basically but not always, text in Weex obey the following rules in order:
1. The CSS style of `max-height`/`min-height` on your text
2. The CSS style of `flex` on your text if there is a `flex-direction:column` on the parent component of you text.
3. The CSS style of `height` on your text
4. The CSS style of `align-items:stretch` on your text if there is a `flex-direction:row` on the parent you text.
-5. The content of your text and [text style](../styles/text-styles.html) on your text.
-6. Other related CSS style not mentioned here.
+5. The content of your text and [text styles](../styles/text-styles.html) on your text.
+6. Other related CSS styles not mentioned here.
+
+### Custom Typeface <Badge text="v0.12+" type="warning"/>
+
+Text component supports loading custom fonts in `ttf` and `woff` file formats.
+1. Create your font with unique `font-family` name.
+2. Using [addRule](../modules/dom.html#addrule-type-contentobject) method of dom module to register your font.
+3. Set `font-family:YourFontFamilyName` style for your text component.
+
+> **Note:** You can name fontFamily in addRule as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binary data of font file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a ‘?’. To get the real name of a font file on Mac, right click on the file in Finder and inspect the f [...]
-### Custom Typeface
-`support:v0.12.0`
+
-support loading custom font of `ttf` and `woff` format. Call [addRule](../modules/custom_font.html) in dom module to build your own `font-family`, we suggest that you call `addRule` in `beforeCreate`.
+> **Note:** Specially, if you are using [Alibaba Iconfont](http://www.iconfont.cn/) to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
-## Examples
-* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
+## Example
+* [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0).
diff --git a/docs/docs/images/CustomFontface_badcase.png b/docs/docs/images/CustomFontface_badcase.png
new file mode 100644
index 0000000..2832c55
Binary files /dev/null and b/docs/docs/images/CustomFontface_badcase.png differ
diff --git a/docs/docs/styles/text-styles.md b/docs/docs/styles/text-styles.md
index ec2322d..16a773c 100644
--- a/docs/docs/styles/text-styles.md
+++ b/docs/docs/styles/text-styles.md
@@ -1,4 +1,4 @@
-# Text Style
+# Text Styles
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)
diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md
index baf7172..b345eb5 100644
--- a/docs/zh/docs/components/text.md
+++ b/docs/zh/docs/components/text.md
@@ -4,40 +4,43 @@
`<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来.
-> **注意：** `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。
+> **注意：** `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白字符，暂时只能通过数据绑定的方式，见下面动态文本。
-> **注意：** `<text>`不支持子组件。
+> **注意：** `<text>` 不支持子组件。
## 样式
-* 支持 **[通用样式](../styles/common-styles.html)。**
-* 支持 **[文本样式](../styles/text-styles.html)。**
+* 支持 [通用样式](../styles/common-styles.html)。
+* 支持 [文本样式](../styles/text-styles.html)。
## 属性
-除了动态文本，text组件不支持其他属性
-### dynamic text
+除了动态文本，text组件不支持其他属性。
+
+### 动态文本
下列代码片段可以实现文字内容和JS变量的绑定。
- <template>
- <div>
- <text >{{content}}</text>
- </div>
- </template>
- <script>
- module.exports = {
- data: function(){
- return {
- content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. "
- }
- }
+```html
+<template>
+ <div>
+ <text >{{content}}</text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ data: function(){
+ return {
+ content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework."
}
- </script>
+ }
+}
+</script>
+```
## 事件
-支持 **[通用事件](../events/common-events.html)**。
+* 支持 [通用事件](../events/common-events.html)。
## 其他
-### 文字高度
-文字高度的计算规则比较复杂，但大致上遵循以下优先级进行计算，排在前面的优先级最高。
+### 文字高度
+文字高度的计算规则比较复杂，但大致上遵循以下优先级进行计算，排在前面的优先级最高。
1. 文字节点的`max-height`/`min-height`样式。
2. 文字节点的`flex`属性且文字的父节点上有`flex-direction:column`样式。
3. 文字节点的`height`样式。
@@ -45,11 +48,19 @@
5. 文字内容和文字本身的[样式](../styles/text-styles.html)。
6. 其他相关CSS属性。
+### 自定义字体 <Badge text="v0.12+" type="warning"/>
+
+文本组件支持 `ttf` 和 `woff` 字体格式的自定义字体。
+1. 使用唯一的 `font-family` 名字创建字体文件。
+2. 使用 Dom 模块的 [addRule](../modules/dom.html#addrule-type-contentobject) 方法注册字体。
+3. 在文本中使用 `font-family:YourFontFamilyName` 样式指定字体。
+
+> **注意** addRule 方法里的 fontFamily 可以随意取，这个名字是 Weex 本地索引用的，并不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统字库中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。要获取字体名字，可以在字体文件上单击右键，显示文件信息。以下图片显示了一个不好的做法，记住，永远不要使用 `iconfont` 作为你字体的名字。
-### 自定义字体
-`支持版本:v0.12.0`
+
-支持ttf和woff字体格式的自定义字体, 可以通过调用 `dom` module 里面的 [addRule](../modules/dom.html)方法, 构建自定义的`font-family`使用, addRule 建议在 `beforeCreate` 或者更早时调用
+> **注意** 如果你使用 [Alibaba Iconfont](http://www.iconfont.cn/) 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。
## 示例
-* [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0)
\ No newline at end of file
+* [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0)
+
\ No newline at end of file
diff --git a/docs/zh/docs/images/CustomFontface_badcase.png b/docs/zh/docs/images/CustomFontface_badcase.png
new file mode 100644
index 0000000..2832c55
Binary files /dev/null and b/docs/zh/docs/images/CustomFontface_badcase.png differ