让网页中的文字像古诗一样竖排显示
作者：大鹏 发布于：2007-4-20 9:01 Friday 分类：JavaScript与HTML
古诗大家都看过吧~有时为了突出一点效果，设计师喜欢将文字的版面改变一下，其中竖排显示的文字还是很有用的，其中主要牵扯到的是CSS的两个文字属性~分别是layout-flow和writing-mode，而vertical-align也是针对垂直显示文字的一种属性，
自己看一下，以后用到的时候就不愁了哦!
[color=#DC143C]layout-flow[/color]
[codes=html]<style>
#idDIV{width:100%;height:90px;background-color:thistle;padding:8px;layout-flow:vertical-ideographic; text-align:left;vertical-align:auto;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
with (document.all("idSel1")) var sValue1=options[selectedIndex].value;
with (document.all("idSel2")) var sValue2=options[selectedIndex].value;
with (oDiv.style) {
layoutFlow=sValue1;verticalAlign=sValue2;
}
oCodeDiv.innerText="layout-flow : "+sValue1+"\r\n"+"vertical-align : "+sValue2+" ;";
}
</script>
<table border=0 cellpadding=0 cellspacing=0 width=100% height=90><tr>
<td id=idDIV>请您用下面的按钮选择这段文字的<b> layout-flow </b>和<b> vertical-align </b>属性的值。</td>
</tr></table>
<br>
<table><tr><td>
<select id="idSel1" onchange="rdl_change();">
<option value="horizontal">---layout-flow---
<option value="horizontal">horizontal
<option value="vertical-ideographic" selected>vertical-ideographic
</select>
</td><td>
<select id="idSel2" onchange="rdl_change();">
<option value="auto">---vertical-align---
<option value="baseline">baseline
<option value="sub">sub
<option value="super">super
<option value="top">top
<option value="text-top">text-top
<option value="middle">middle
<option value="bottom">bottom
<option value="text-bottom">text-bottom
<option value="auto">auto
</select>
</td></tr></table>
<div id=idCodeDiv>layout-flow : vertical-ideographic ;<br>vertical-align : auto ;</div>
[/codes]
[color=#DC143C]writing-mode[/color]
[codes=html]
<style>
#idDIV{width:100%;height:90px;background-color:#87CEEB;padding:8px;writing-mode:tb-rl; text-align:left;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
with (document.all("idSel1")) var sValue1=options[selectedIndex].value;
with (document.all("idSel2")) var sValue2=options[selectedIndex].value;
with (oDiv.style) {
writingMode=sValue1;textAlign=sValue2;
}
oCodeDiv.innerText="writing-mode : "+sValue1+"\r\n"+"text-align : "+sValue2+" ;";
}
</script>
<div id=idDIV>请您用下面的按钮选择这段文字的 writing-mode 和 text-align 属性的值。看一看会发生什么，然后您就会明白他们的意义。</div>
<br>
<table><tr><td>
<select id="idSel1" onchange="rdl_change();">
<option value="lr-tb">---writing-mode---
<option value="lr-tb">lr-tb
<option value="tb-rl" selected>tb-rl
</select>
</td><td>
<select id="idSel2" onchange="rdl_change();">
<option value="left">---text-align---
<option value="left">left
<option value="right">right
<option value="center">center
<option value="justify">justify
</select>
</td></tr></table>
<div id=idCodeDiv>writing-mode : tb-rl ;<br>text-align : left ;</div>
[/codes]
标签： html javascript css