CSS3中的注音对齐属性ruby-align用法指南


Posted in HTML / CSS onJuly 01, 2016

语法:
 
ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
 
参数:
 
auto :  由浏览器确定对齐方式。对于ideographic(东亚文本)以distribute-space值对齐。对于Latin文本以center值对齐
left :  根据基本宽度左对齐
center :  根据基本宽度居中对齐。如果基本宽度小于ruby文本的宽度,那么在ruby文本的宽度中居中基本宽度
right :  根据基本宽度右对齐
distribute-letter :  如果ruby文本的宽度小于基本宽度,则ruby文本在基本宽度中均匀分布。如果ruby文本的宽度大于或等于基本宽度,居中对齐
distribute-space :  如果ruby文本的宽度小于基本宽度,则ruby文本在基本宽度中均匀分布。在ruby文本中,在第一个字符的前面后最后字符的后面有半个字距的空白区域。如果ruby文本的宽度大于或等于基本宽度,居中对齐
line-edge :  如果ruby文本不相邻行边缘,则其被居中。否则ruby文本行在基本文本边的上方

实例代码:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title> ruby-align </title>   
  6. <style>   
  7. ruby.sample1 {ruby-align:auto;}   
  8. ruby.sample2 {ruby-align:start;}   
  9. ruby.sample3 {ruby-align:left;}   
  10. ruby.sample4 {ruby-align:center;}   
  11. ruby.sample5 {ruby-align:end;}   
  12. ruby.sample6 {ruby-align:rightright;}   
  13. ruby.sample7 {ruby-align:distribute-letter;}   
  14. ruby.sample8 {ruby-align:distribute-space;}   
  15. ruby.sample9 {ruby-align:line-edge;}   
  16. ruby {background-color:pink;}   
  17. rt {background-color:yellow;}    
  18. </style>   
  19.     
  20. </head>   
  21.     
  22. <body>   
  23. <p><ruby class="sample1">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:auto;)</p>   
  24. <p><ruby class="sample2">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:start;)</p>   
  25. <p><ruby class="sample3">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:left;)</p>   
  26. <p><ruby class="sample4">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:center;)</p>   
  27. <p><ruby class="sample5">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:end;)</p>   
  28. <p><ruby class="sample6">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:rightright;)</p>   
  29. <p><ruby class="sample7">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-letter;)</p>   
  30. <p><ruby class="sample8">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-space;)</p>   
  31. <p><ruby class="sample9">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:line-edge;)</p>   
  32. </body>   
  33. </html>  

实例图
CSS3中的注音对齐属性ruby-align用法指南

HTML / CSS 相关文章推荐
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python中xrange用法分析
2015/04/15 Python
详解Django中的form库的使用
2015/07/18 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2014年销售工作总结
2014/12/01 职场文书
在人间读书笔记
2015/06/30 职场文书
生产设备维护保养制度
2015/08/06 职场文书
小学生教师节广播稿
2015/08/19 职场文书
导游词之任弼时故居
2020/01/07 职场文书
React如何创建组件
2021/06/27 Javascript
MySQL 数据表操作
2022/05/04 MySQL