CN102214177B - 在标签中文字竖排的方法和装置 - Google Patents
在标签中文字竖排的方法和装置 Download PDFInfo
- Publication number
- CN102214177B CN102214177B CN 201010143008 CN201010143008A CN102214177B CN 102214177 B CN102214177 B CN 102214177B CN 201010143008 CN201010143008 CN 201010143008 CN 201010143008 A CN201010143008 A CN 201010143008A CN 102214177 B CN102214177 B CN 102214177B
- Authority
- CN
- China
- Prior art keywords
- container
- label
- label container
- height
- father
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
- 238000000034 method Methods 0.000 title claims abstract description 28
- 230000003044 adaptive effect Effects 0.000 claims description 18
- 238000005096 rolling process Methods 0.000 claims description 14
- 230000008859 change Effects 0.000 claims description 12
- 238000012544 monitoring process Methods 0.000 claims description 10
- 230000006978 adaptation Effects 0.000 claims description 6
- 230000000694 effects Effects 0.000 abstract description 10
- 239000003086 colorant Substances 0.000 abstract 1
- 238000004519 manufacturing process Methods 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
Images
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种在标签中文字竖排的方法和装置，属于计算机领域。所述方法包括：设置标签容器的宽度能且只能容纳一个文本文字；将所述标签容器的文本显示模式设置为自动换行模式；以文本形式显示所述标签容器中的文字内容。所述装置包括：第一设置模块、第二设置模块和显示模块。本发明通过合理地设置标签容器的宽度，使其只容纳一个文本文字，并且利用各大浏览器都支持的自动换行达到文字竖排的效果，摒弃了使用图片替代文字标签的做法，只需重新设置文字属性就可以改变文字大小、颜色等，无需重新制作整个标签，灵活性更好。
Description
技术领域
本发明涉及计算机领域，特别涉及一种在标签中文字竖排的方法和装置。
背景技术
在Web(互联网)应用中，标签式布局非常常见。标签式布局包括水平标签式布局和垂直标签式布局。其中，垂直标签往往与水平标签结合，解决导航数据层次较深时使用不直观的问题。
在垂直标签中，其文字内容也需要竖排，从而有利于用户直观地了解该标签的功能。目前在标签中实现文字竖排的方法为：制作竖排文字图片，然后在各个标签贴上相应的竖排文字图片，达到文字竖排的效果。
在实现本发明的过程中，发明人发现现有技术至少存在以下问题：
通过图片实现文字竖排的方法，缺乏灵活性，即使文字的微小改动，也需要重新制作标签文字图片。
发明内容
为了提高标签中文字竖排的灵活性，本发明实施例提供了一种在标签中文字竖排的方法和装置。所述技术方案如下：
一种在标签中文字竖排的方法，所述方法包括：
设置标签容器的宽度能且只能容纳一个文本文字；
将所述标签容器的文本显示模式设置为自动换行模式；
以文本形式显示所述标签容器中的文字内容；
所述方法还包括：
将总标签容器的高度自适应至所述总标签容器所在的父容器的高度；
将各个所述标签容器放置到所述总标签容器中；
根据预设参数分别计算各个所述标签容器的高度；
如果所有所述标签容器的高度总和大于所述父容器的高度，在所述总标签 容器中添加滚动按钮和滚动事件监听器，所述滚动事件监听器用于监听到鼠标滚动或所述滚动按钮被点击时，在所述总标签容器中滚动各个所述标签容器。
其中，所述将总标签容器的高度自适应至所述总标签容器所在的父容器的高度包括：
在所述父容器添加重设大小事件监听器，所述重设大小事件监听器用于监听所述父容器的大小是否发生改变；
如果所述父容器的大小发生改变，将总标签容器的高度自适应至所述总标签容器所在的父容器的高度。
其中，所述预设参数至少包括各个所述标签容器中的文字的个数和边长，所述根据预设参数分别计算各个所述标签容器的高度包括：
计算所述标签容器中的文字的个数与边长的乘积，将所述乘积作为所述标签容器的高度。
其中，所述预设参数还包括辅助参数，所述辅助参数包括各个所述标签容器上边距、下边距和标签图标的高度中的至少一个，所述根据预设参数分别计算各个所述标签容器的高度包括：
计算所述乘积与所述辅助参数的和值，将所述和值作为所述标签容器的高度。
一种在标签中文字竖排的装置，所述装置包括：
第一设置模块，用于设置标签容器的宽度能且只能容纳一个文本文字；
第二设置模块，用于将所述标签容器的文本显示模式设置为自动换行模式；
显示模块，用于根据所述第一设置模块设置的宽度和第二设置模块设置的显示模式，以文本形式显示所述标签容器中的文字内容；
所述装置还包括：
自适应模块，用于将总标签容器的高度自适应至所述总标签容器所在的父容器的高度；
放置模块，用于将各个所述标签容器放置到所述总标签容器中；
计算模块，用于根据预设参数分别计算各个所述标签容器的高度；
添加模块，用于如果所述计算模块计算的所有所述标签容器的高度总和大于所述父容器的高度，在所述总标签容器中添加滚动按钮和滚动事件监听器，所述滚动事件监听器用于监听到鼠标滚动或所述滚动按钮被点击时，在所述总 标签容器中滚动各个所述标签容器。
其中，所述自适应模块包括：
监听单元，用于在所述父容器添加重设大小事件监听器，所述重设大小事件监听器用于监听所述父容器的大小是否发生改变；
自适应单元，用于如果所述父容器的大小发生改变，将总标签容器的高度自适应至所述总标签容器所在的父容器的高度。
其中，所述预设参数至少包括各个所述标签容器中的文字的个数和边长，所述计算模块，具体用于计算所述标签容器中的文字的个数与边长的乘积，将所述乘积作为所述标签容器的高度。
其中，所述辅助参数包括各个所述标签容器上边距、下边距和标签图标的高度中的至少一个，所述计算模块，还用于所述预设参数还包括辅助参数，计算所述乘积与所述辅助参数的和值，将所述和值作为所述标签容器的高度。
本发明实施例提供的技术方案带来的有益效果是：
通过合理地设置标签容器的宽度，使其只容纳一个文本文字，利用各大浏览器都支持的自动换行达到文字竖排的效果，摒弃了使用图片替代文字标签的做法，只需重新设置文字属性就可以改变文字大小、颜色等，无需重新制作整个标签，灵活性更好。另外，通过自适应外层容器的布局，当外层容器高度不足时可用鼠标滚动标签，页面布局效果更好。
附图说明
图1是本发明实施例1中提供的在标签中文字竖排的方法流程图；
图2是本发明实施例1中提供的在标签中文字竖排的方法另一流程图；
图3是本发明实施例1中提供的具有滚动按钮的标签示意图；
图4是本发明实施例2中提供的在标签中文字竖排的装置结构示意图；
图5是本发明实施例2中提供的在标签中文字竖排的装置另一结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
实施例1
参见图1，本实施例提供了一种在标签中文字竖排的方法，包括：
101：设置标签容器的宽度能且只能容纳一个文本文字；
102：将标签容器的文本显示模式设置为自动换行模式；
103：以文本形式显示标签容器中的文字内容。
进一步的，还可以将总标签容器的高度自适应至总标签容器所在的父容器的高度；将各个标签容器放置到总标签容器中；根据预设参数分别计算各个标签容器的高度；如果所有标签容器的高度总和大于父容器的高度，在总标签容器中添加滚动按钮和滚动事件监听器，滚动事件监听器用于监听到鼠标滚动或滚动按钮被点击时，在总标签容器中滚动各个标签容器。
其中，可以在父容器添加重设大小事件监听器，重设大小事件监听器用于监听父容器的大小是否发生改变；如果父容器的大小发生改变，将总标签容器的高度自适应至总标签容器所在的父容器的高度。
本实施例提供的方法，通过合理地设置标签容器的宽度，使其只容纳一个文本文字，利用各大浏览器都支持的自动换行达到文字竖排的效果，摒弃了使用图片替代文字标签的做法，只需重新设置文字属性就可以改变文字大小、颜色等，无需重新制作整个标签，灵活性更好。另外，通过自适应外层容器的布局，当外层容器高度不足时可用鼠标滚动标签，页面布局效果更好。
参见图2，下面结合一实例介绍上述在标签中文字竖排的方法。
201：生成标签容器；
其中，标签容器可以有一个或多个。
202：设置标签容器的宽度能且只能容纳一个文本文字；
具体的，标签容器宽度W＝F+P1+P2；
其中，F表示标签容器中的文字的边长，P1表示标签容器与其文字之间的左边距，左边距可以大于等于0，P2表示标签容器与其文字之间的右边距，右边距可以大于等于0。
203：将标签容器的文本显示模式设置为自动换行模式；
当外层容器(即父容器)高度不足时，还可以实现用鼠标滚动标签，详见步骤204-209，其效果图参见图3。
204：生成一个总标签容器；
205：将总标签容器的高度自适应至总标签容器所在的父容器的高度；
206：将各个标签容器放置到总标签容器中；
207：根据预设参数分别计算各个标签容器的高度；
具体的，标签容器的高度H＝S×F+I+P3+P4；
其中，S、F、I、P3、P4为预设参数，I、P3、P4为辅助参数，S表示标签容器中的文字的个数，F表示标签容器中的文字的边长，P3表示标签容器与其文字之间的上边距，上边距大于等于0，P4表示标签容器与其文字之间的下边距，下边距大于等于0，I表示标签图标的高度，大于等于0，另外，本实施例规定标签图标的宽度小于等于F，若大于F，则将标签图标的宽度设置成F，以免标签图标将标签容器撑宽。
208：如果所有标签容器的高度总和大于父容器的高度，在总标签容器中添加滚动按钮和滚动事件监听器，滚动事件监听器用于监听到鼠标滚动或滚动按钮被点击时，在总标签容器中滚动各个标签容器；
209：在父容器添加重设大小事件监听器，重设大小事件监听器用于监听父容器的大小是否发生改变；如果父容器的大小发生改变，重新执行205-208；
210：以文本形式显示标签容器中的文字内容。
本实施例提供的方法，通过合理地设置标签容器的宽度，使其只容纳一个文本文字，利用各大浏览器都支持的自动换行达到文字竖排的效果，摒弃了使用图片替代文字标签的做法，只需重新设置文字属性就可以改变文字大小、颜色等，无需重新制作整个标签，灵活性更好。另外，通过自适应外层容器的布局，当外层容器高度不足时可用鼠标滚动标签，页面布局效果更好。
实施例2
参见图4，本实施例提供了一种在标签中文字竖排的装置，包括：
第一设置模块301，用于设置标签容器的宽度能且只能容纳一个文本文字；
第二设置模块302，用于将标签容器的文本显示模式设置为自动换行模式；
显示模块303，用于根据第一设置模块301设置的宽度和第二设置模块302设置的显示模式，以文本形式显示标签容器中的文字内容。
进一步的，参见图5，该装置还包括：
自适应模块304，用于将总标签容器的高度自适应至总标签容器所在的父容器的高度；
放置模块305，用于将各个标签容器放置到总标签容器中；
计算模块306，用于根据预设参数分别计算各个标签容器的高度；
添加模块307，用于如果计算模块306计算的所有标签容器的高度总和大于父容器的高度，在总标签容器中添加滚动按钮和滚动事件监听器，滚动事件监听器用于监听到鼠标滚动或滚动按钮被点击时，在总标签容器中滚动各个标签容器。
其中，自适应模块304包括：
监听单元304a，用于在父容器添加重设大小事件监听器，重设大小事件监听器用于监听父容器的大小是否发生改变；
自适应单元304b，用于如果父容器的大小发生改变，将总标签容器的高度自适应至总标签容器所在的父容器的高度。
其中，计算模块306，具体用于预设参数至少包括各个标签容器中的文字的个数和边长，计算标签容器中的文字的个数与及边长的乘积，将乘积作为标签容器的高度。
其中，计算模块306，还用于预设参数还包括辅助参数，辅助参数包括各个标签容器上边距、下边距和标签图标的高度中的至少一个，计算乘积与辅助参数的和值，将和值作为标签容器的高度。
本实施例提供的装置，与方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
本实施例提供的装置，通过合理地设置标签容器的宽度，使其只容纳一个文本文字，利用各大浏览器都支持的自动换行达到文字竖排的效果，摒弃了使用图片替代文字标签的做法，只需重新设置文字属性就可以改变文字大小、颜色等，无需重新制作整个标签，灵活性更好。另外，通过自适应外层容器的布局，当外层容器高度不足时可用鼠标滚动标签，页面布局效果更好。
以上实施例提供的技术方案中的全部或部分内容可以通过软件编程实现，其软件程序存储在可读取的存储介质中，存储介质例如：计算机中的硬盘、光盘或软盘。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种在标签中文字竖排的方法，其特征在于，所述方法包括：
设置标签容器的宽度能且只能容纳一个文本文字；
将所述标签容器的文本显示模式设置为自动换行模式；
以文本形式显示所述标签容器中的文字内容；
所述方法还包括：
将总标签容器的高度自适应至所述总标签容器所在的父容器的高度；
将各个所述标签容器放置到所述总标签容器中；
根据预设参数分别计算各个所述标签容器的高度；
如果所有所述标签容器的高度总和大于所述父容器的高度，在所述总标签容器中添加滚动按钮和滚动事件监听器，所述滚动事件监听器用于监听到鼠标滚动或所述滚动按钮被点击时，在所述总标签容器中滚动各个所述标签容器。
2.如权利要求1所述的方法，其特征在于，所述将总标签容器的高度自适应至所述总标签容器所在的父容器的高度包括：
在所述父容器添加重设大小事件监听器，所述重设大小事件监听器用于监听所述父容器的大小是否发生改变；
如果所述父容器的大小发生改变，将总标签容器的高度自适应至所述总标签容器所在的父容器的高度。
3.如权利要求1所述的方法，其特征在于，所述预设参数至少包括各个所述标签容器中的文字的个数和边长，所述根据预设参数分别计算各个所述标签容器的高度包括：
计算所述标签容器中的文字的个数与边长的乘积，将所述乘积作为所述标签容器的高度。
4.如权利要求3所述的方法，其特征在于，所述预设参数还包括辅助参数，所述辅助参数包括各个所述标签容器上边距、下边距和标签图标的高度中的至少一个，所述根据预设参数分别计算各个所述标签容器的高度包括：
计算所述乘积与所述辅助参数的和值，将所述和值作为所述标签容器的高度。
5.一种在标签中文字竖排的装置，其特征在于，所述装置包括：
第一设置模块，用于设置标签容器的宽度能且只能容纳一个文本文字；
第二设置模块，用于将所述标签容器的文本显示模式设置为自动换行模式；
显示模块，用于根据所述第一设置模块设置的宽度和第二设置模块设置的显示模式，以文本形式显示所述标签容器中的文字内容；
所述装置还包括：
自适应模块，用于将总标签容器的高度自适应至所述总标签容器所在的父容器的高度；
放置模块，用于将各个所述标签容器放置到所述总标签容器中；
计算模块，用于根据预设参数分别计算各个所述标签容器的高度；
添加模块，用于如果所述计算模块计算的所有所述标签容器的高度总和大于所述父容器的高度，在所述总标签容器中添加滚动按钮和滚动事件监听器，所述滚动事件监听器用于监听到鼠标滚动或所述滚动按钮被点击时，在所述总标签容器中滚动各个所述标签容器。
6.如权利要求5所述的装置，其特征在于，所述自适应模块包括：
监听单元，用于在所述父容器添加重设大小事件监听器，所述重设大小事件监听器用于监听所述父容器的大小是否发生改变；
自适应单元，用于如果所述父容器的大小发生改变，将总标签容器的高度自适应至所述总标签容器所在的父容器的高度。
7.如权利要求5所述的装置，其特征在于，所述预设参数至少包括各个所述标签容器中的文字的个数和边长，所述计算模块，具体用于计算所述标签容器中的文字的个数与边长的乘积，将所述乘积作为所述标签容器的高度。
8.如权利要求7所述的装置，其特征在于，所述预设参数还包括辅助参数，所述辅助参数包括各个所述标签容器上边距、下边距和标签图标的高度中的至少一个，所述计算模块，还用于计算所述乘积与所述辅助参数的和值，将所述和值作为所述标签容器的高度。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN 201010143008 CN102214177B (zh) | 2010-04-07 | 2010-04-07 | 在标签中文字竖排的方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN 201010143008 CN102214177B (zh) | 2010-04-07 | 2010-04-07 | 在标签中文字竖排的方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102214177A CN102214177A (zh) | 2011-10-12 |
| CN102214177B true CN102214177B (zh) | 2013-06-12 |
Family
ID=44745492
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN 201010143008 Expired - Fee Related CN102214177B (zh) | 2010-04-07 | 2010-04-07 | 在标签中文字竖排的方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102214177B (zh) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104572608B (zh) * | 2013-10-18 | 2017-12-19 | 北大方正集团有限公司 | 竖排蒙文文字的方法和装置 |
| CN106815249B (zh) * | 2015-11-30 | 2022-01-07 | 腾讯科技（深圳）有限公司 | 竖向文本广告过滤方法和装置 |
| CN106325877A (zh) * | 2016-08-29 | 2017-01-11 | 福建中金在线信息科技有限公司 | 一种标签展示方法及装置 |
| CN108108364A (zh) * | 2016-11-23 | 2018-06-01 | 珠海金山办公软件有限公司 | 一种标签显示方法及装置 |
| CN107862728B (zh) * | 2017-09-05 | 2021-04-06 | 平安普惠企业管理有限公司 | 图片标签的添加方法、装置及计算机可读存储介质 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101364270A (zh) * | 2007-08-10 | 2009-02-11 | 杜刚 | 一种所见即所得输入方法下联机手写文字的字切分方法 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7676744B2 (en) * | 2005-08-19 | 2010-03-09 | Vistaprint Technologies Limited | Automated markup language layout |
-
2010
- 2010-04-07 CN CN 201010143008 patent/CN102214177B/zh not_active Expired - Fee Related
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101364270A (zh) * | 2007-08-10 | 2009-02-11 | 杜刚 | 一种所见即所得输入方法下联机手写文字的字切分方法 |
Non-Patent Citations (1)
| Title |
|---|
| 李海柱.蒙古文网页中字体嵌入和文字竖排研究.《内蒙古师范大学学报（自然科学汉文版）》.2005,第34卷(第1期),第48-49,52页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102214177A (zh) | 2011-10-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5983983B2 (ja) | 情報処理装置および方法、並びにプログラム | |
| CN102214177B (zh) | 在标签中文字竖排的方法和装置 | |
| CN102929603B (zh) | 界面控件布局装置和界面控件布局方法 | |
| CN102750148B (zh) | 一种媒体信息显示方法及装置 | |
| CN103605783B (zh) | 网页显示方法及装置 | |
| CN103176688B (zh) | 分类应用的方法和装置 | |
| CN103677516A (zh) | 终端的界面生成方法和装置 | |
| CN101937312B (zh) | 一种电子书的标记方法及移动终端 | |
| CN102609256A (zh) | 一种基于网页的动态图表生成方法 | |
| TW200830207A (en) | Business form creating system, network system using the same, and business form creating method | |
| WO2015180422A1 (zh) | 页面排版方法及装置 | |
| CN105069060B (zh) | 一种html文档分页排版方法 | |
| US20120278696A1 (en) | Rule-based grid independent of content | |
| CN105224564A (zh) | 一种网页适应屏幕排版方法及装置 | |
| CN103135977A (zh) | 一种浏览器中输入信息的方法和装置 | |
| CN104571978A (zh) | 一种基于html标签进行文档分页打印的方法 | |
| CN102053787A (zh) | 信息处理设备、图像放大处理方法和程序 | |
| CN103365920A (zh) | 显示网页的方法、浏览器及移动终端 | |
| CN104424174B (zh) | 文档处理系统和文档处理方法 | |
| CN106407227A (zh) | 一种动态网页显示方法和系统 | |
| US9418055B2 (en) | Method for copying multiple content between applications | |
| CN102521327A (zh) | 电子表单的展示方法及系统 | |
| CN113297313A (zh) | 表格数据展示方法、装置、电子设备及存储介质 | |
| CN103049231A (zh) | 设置打印参数的方法及动态调整打印参数的打印方法 | |
| CN107516334B (zh) | 一种手写轨迹的显示方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| C56 | Change in the name or address of the patentee | ||
| CP03 | Change of name, title or address |
Address after: South South technology twelve road 518057 in Guangdong province Shenzhen City Guangdong streets Nanshan District high tech Industrial Park, No. 2, Kingdee Software Park building A floor 2 South Block Patentee after: SHENZHEN JINDIE TIANYAN MIDDLEWARE Co.,Ltd. Address before: 518057 Guangdong City, Nanshan District province high tech Zone in the middle of the industrial zone of the sparrow tower M-6 building, floor 1, area 3, second, 4 Patentee before: SHENZHEN KINGDEE MIDDLEWARE Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder | ||
| CP01 | Change in the name or title of a patent holder |
Address after: South South technology twelve road 518057 in Guangdong province Shenzhen City Guangdong streets Nanshan District high tech Industrial Park, No. 2, Kingdee Software Park building A floor 2 South Block Patentee after: Shenzhen Kingdee tianyanyun computing Co.,Ltd. Address before: South South technology twelve road 518057 in Guangdong province Shenzhen City Guangdong streets Nanshan District high tech Industrial Park, No. 2, Kingdee Software Park building A floor 2 South Block Patentee before: SHENZHEN JINDIE TIANYAN MIDDLEWARE Co.,Ltd. |
|
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20130612 |