Several interesting permutations of Chinese text segments implemented by CSS

Source: Internet
Author: User
Tags filter modify window
css| Chinese

Text inverted (90 degrees counterclockwise):

Run Code Box

1. Text inverted (counterclockwise turn 90 degrees) <br><br><span style= "font-family:@ song body; color:red" > All Personnel Shun Destiny </span><br> <br>2. Text is writing vertical row, Chinese vertical row, from right to left to read <br><br><div style= "layout-flow:vertical-ideographic;height:399; Float:right; " > In the dark blue sea, the sea is splashed with joy <br> our hearts are free, our thoughts are boundless <br> This is our empire, its power is everywhere <br> our banner is Sceptre, who met all have to obey the <br> We live a rough life, <br> from toil to rest in turmoil, what kind of days have fun <br> Oh, who can understand? Not you, pampered's slaves <br> not only "no road" rogue to know? <br> Spinning our memories in a red glass <br> when the victorious partners finally split the belongings <br> who does not shed tears, when the memories dim the forehead of each:<br> now, the fallen warriors how to rejoice! <br></div> <br><br>3. Writing inverted vertical <br><br><br><script langauge= "javascript "> var onum = 0; function Showtext () {var strText = ' text and inverted vertical row? '; var odiv = document.all[' Odiv ']; Odiv. InnerHTML = strtext.substr (0, Onum); Onum = (onum>strtext.length)? 0:onum+1; Window.settimeout (' Showtext () ', 500); } window.onload = function () {Window.settimeout (' Showtext (); ', 500; }</script><div id= "Odiv" style= "width:25px;height:180px;direction:rtl;unicode-bidi:bidi-override; Layout-flow:vertical-ideographic;text-align:right; " ></div><br>4. Chinese vertical row, read from left to right: <br><style>div {display:inline;color:red; font:11pt Chinese Xingkai; WRITING-MODE:TB-RL;} </style><div> determined,</div><div> not afraid to sacrifice,</div><div>,</div><div> Fight for Victory! </div><br><br>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Two kinds of vertical rows:

Run Code Box

<div style= "Width:5px;float:left;" ><font face= "@ official script" size= "5px" color= "Red" > As long as you persevere what kind of results can be </font></div><div style= " Position:absolute;filter:progid:dximagetransform.microsoft.basicimage (rotation=1); float:right; " ><font face= "XXFarEastFont-Xingkai" size= "5px" color= "Blue" > As long as you persevere what kind of outcome is possible </div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Reverse arrangement of text segments:

Run Code Box

<script type= "Text/javascript" >//FUNCTIONSCBG (ObjRef, state) {ObjRef.style.backgroundColor = (1 = =)? ' #EEEEEE ': ' #FFFFFF '; return;} </SCRIPT><TABLE><TR><TD width= "152" height= ><center><bdo dir= "RTL" > Welcome to the Web Teaching network </bdo></td></tr></table>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

a strange way of writing :

Run Code Box

<style>div{writing-mode:tb-rl;filter:fliph () FLIPV () alpha (OPACITY=50);} </style><div> you want to use it to command Star Wars?! Now the SAN is wearing a hoop, he comforted himself that this is a kind of cultivation. Calculate 9,981 difficult finally to the west, after million insurance originally is to Sango. </div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

<CENTER><TABLE><TR><TD width= "352" height= "style=" filter:fliph;font-size:20px; font-family:@ script; color:deeppink; " ><center><bdo dir= "RTL" ><i> friends who are interested in web design can make friends </i></bdo></td></tr> </table>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.