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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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基础知识:类与对象(1)
2006/12/13 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python查看微信撤回消息代码
2018/06/07 Python
python进行两个表格对比的方法
2018/06/27 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
学习张丽丽心得体会
2014/09/03 职场文书
学校2014年度工作总结
2014/12/06 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers