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学习之2D转换功能详解
Dec 23 HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
javascript事件问题
2009/09/05 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
如何在django中运行scrapy框架
2020/04/22 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
如何安装ruby on rails
2014/02/09 面试题
五一服装活动方案
2014/01/11 职场文书
优秀求职信范文分享
2014/01/26 职场文书
音乐器材管理制度
2014/01/31 职场文书
毕业生自荐信格式
2014/03/07 职场文书
施工工地安全标语
2014/06/07 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014年教务处工作总结
2014/12/03 职场文书
人事局接收函
2015/01/30 职场文书
2015年服务员工作总结
2015/04/08 职场文书
防卫过当辩护词
2015/05/21 职场文书
高三生物教学反思
2016/02/22 职场文书