Several ways to realize the vertical line of webpage text

Ancient books are written in the form of writing from the top to the bottom from the right to the left, we can be on the page to achieve this text layout effect, although now vertical in the page with less than the comparison, but we may in our own personal website or blog introduction page with vertical layout, Make the page style look richer and retro!

Through some attempts I found the following 3 ways to vertical text on the Web page method, each has its shortcomings and advantages, below we will look at the specific methods and implementation of the results!

Mode 1, CSS properties float to achieve text vertical line #

Implementation principle: Put a short sentence in a div, the width of the div and the size of the font to be displayed (div height = Word x font size), Div becomes a vertical bar each line can only display one text, the second text will be squeezed to the next line, Then set the div's float to right and float. It reached the vertical display of a poem.

Code implementation:

<style>* {Font-family:georgia;}    #content {position:absolute;    width:1200px;    height:400px;    left:50%;    top:50%;    Margin-top: -300px;    Margin-left: -600px;    border:1px dashed #2f96b4;    padding-top:50px; border-radius:20px;}    #contentRemark {position:absolute;    width:1200px;    height:300px;    left:50%;    top:56%;    Margin-left: -600px;    padding-top:50px;    Text-indent:2em;    font-size:20px; Line-height:2em;}.    poetryname {font-size:xx-large;    Font-weight:bold;    Line-height:1.5em;    Width:1.5em;    Float:right;    font-size:36px;    padding-top:40px; padding-right:20px;}.    Poetryperson {width:1.5em;    Float:right;    Line-height:2em;    padding-top:70px;    font-size:18px; Color: #d3524e;}.    poetrycontent {width:1.5em;    Float:right;    Line-height:1.5em;    padding-top:30px; font-size:20px;}.    poetrycontent:hover {width:1.5em;    Float:right;    Line-height:1.5em; Padding-top: 30px;    font-size:20px;    Cursor:pointer; Color: #d3524e;} </style><div id= "Content" > <div class= "Poetryname" > Love Lotus said </div> <div style= "WIDTH:1.5EM; Float:right; " > </div> <div class= "Poetryperson" > Zhou dun </div> <div style= "WIDTH:1.5EM; Float:right; " > </div> <div class= "poetrycontent" > The flower of the land and vegetation </div> <div class= "poetrycontent" > Cute </d iv> <div class= "Poetrycontent" > Jintau sole love chrysanthemum </div> <div class= "Poetrycontent" > from Li Tanglai </div> & Lt;div class= "Poetrycontent" > The world Loves peony </div> <div class= "Poetrycontent" > to the sole love lotus out of the mud and not dye </div> <di V class= "Poetrycontent" > Zhuo Qinglian without demon </div> <div class= "Poetrycontent" > in-line external straight </div> <div class= "Poe Trycontent "> Concise </div> <div class=" poetrycontent "> Xiang Yuan yi Qing </div> <div class=" Poetrycontent " ; Kingston Net planting </div> <div class= "poetrycontent" > can not be a distant view but not to play </div&Gt <div class= "Poetrycontent" > to the Hermit of Chrysanthemum </div> <div class= "poetrycontent" > Peony flower of the rich also </div> <d IV class= "Poetrycontent" > Lotus gentleman also </div> <div class= "poetrycontent" > Aye chrysanthemum Love </div> <div class= "P Oetrycontent "> Pottery rarely heard </div> <div class=" poetrycontent "> Lotus love </div> <div class=" Poetrycontent " > Who's <div </div> class= "poetrycontent" > Peony love </div> <div class= "Poetrycontent" > The Public and lt;/div> <div style= "margin-left:40px;margin-top:-20px;" >! [] (http://upload-images.jianshu.io/upload_images/2054-980f1bc940e1b9b9.jpg?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240) </div></div>

The demo of vertical text is realized by means of float.

Advantages and disadvantages of this approach:
Advantages: The writing of Web documents is the same as when we normally write Web pages, you can set a different display style for each line.
Cons: If a line of text is longer, there is no way to wrap ~

Mode 2, CSS Properties transform:rotate implement text vertical line #

The principle of implementation: put a paragraph of each word in a span label (more text can be generated by JS Span), and then put these span tags in a large div container, the container div rotated 90 degrees clockwise, and then the container span counter-clockwise rotation 90 degrees, After two rotations, the vertical text needs to be reached.

Code implementation:

<style>.container {position:absolute;    right:300px;    Margin-top: -200px;    width:440px;    height:1000px;    Background-color: #FFFFFF;    padding-left:36px;    Font-family: "in italics";    border:1px solid #999999;    margin-left:100px;    OVERFLOW-Y: scroll;    Overflow-x: Hidden; -webkit-transform:rotate (90deg);}    /** the container (vertical column) of each row **/.container. items {width:445px;    height:34px;    /*background-color: #EEEEEE; * */*border-left:1px solid #999999; */}.container. Items. item {display:inline-block;    width:20px;    height:20px;    font-size:20px;    Text-align:center;    line-height:20px;    /*border-bottom:1px solid #CCCCCC; */}.container. Items Item:hover {background-color:pink;    Cursor:pointer; font-size:22px;}.    action1 {width:100px!important; padding-left:20px;}. Rotate {-webkit-transform:rotate ( -90deg);}.    Style1 {background-color: #ff6699; Color: #EEEEEE;}.    Style2 {background-color: #4c98ce; Color: #EEEEEE;} #veRtical Div {width:1.5em; Float:right;}    #vertical. title {font-size:xx-large;    Font-weight:bold; Line-height:1em;} </style><div class= "Container" > <p> </p> <div class= "items" > <div class= "Item" &G t;</div> <div class= "item" ></div> <div class= "item" ></div> <div class= "Item rota TE "style=" Font-size:36px;font-weight:bold; " > Love </div> <div class= "item" ></div> <div class= "Item Rotate" style= "font-size:36px;font-weight : bold; " > Lotus </div> <div class= "item" ></div> <div class= "Item Rotate" style= "font-size:36px;font-weight : bold; " > says </div> <div class= "item" ></div> <div class= "item" ></div> <div class= "Item" & gt;</div> <div class= "item" ></div> <p> </p> </div> <p class= ' Action1 ' &G t;</p></div><!--introduced jquery-dependent--><script src= "Jquery.min.js"></script><script>var arr = "The Flowers of the land and grass, the lovable are very much." Jintau alone love chrysanthemum. Since Li Tanglai, the world loves peony. To the lone love lotus out of the mud and not dye, Zhuo Qinglian and not demon, in the straight, concise, fragrant far Yi Qing, Kingston Net plant, can be far from the view and not to be obscene play Yan. To the chrysanthemum, the flower of the hermit also, peony, the wealth of Flowers Also, lotus, Flower of the gentleman also. Aye Chrysanthemum's love, Tao after seldom smell. The love of Lotus, who is the same giver? The love of peony, the most suitable! ". Split ("); var cheight = $ (". Items"). Height (); var textHeight = $ (". Item"). Height (), var vcount = parseint (cheight/texth eight); The number of words shown in each column is var textarr = [];for (var i = 0; i < arr.length; i++) {if (i = = 0) {Textarr.push ({"Hanzi"    : Arr[i]});    } else {Textarr[textarr.length-1].hanzi + = Arr[i]; }}var html = ""; for (var j = 0; J < Textarr.length;    J + +) {html + = "<div class= ' items ' >";    var Temparr = Textarr[j].hanzi.split (""); Console.log (Temparr) for (var k = 0; k < temparr.length; k++) {if (/[<>!) * (^) $%[email protected]#$...&%￥-+=,. ,; ' "": • ']/.test (Temparr[k]) {html + = "<div class= ' item ' style= ' Display:inline ' >" + temparr[k] + "</div& gt; ";} else {html + = "<div class= ' item rotate ' >" + temparr[K] + "</div>"; }} HTML + + "</div>";} $ (". Action1"). After (HTML);</script>

The demo of vertical text is realized by Transform:rotate way

Advantages and disadvantages of this approach:
Advantages: A large paragraph of text can also be used for automatic line wrapping. Cons: It's troublesome to implement line-break control in a specific location, and each word must be wrapped with a span tag.

Mode 3, CSS Properties Write-mode implement text vertical line #

Writing-mode literal translation comes from the writing mode, it is to control the layout of the text produced, in other words it is used to achieve vertical text, but the vertical line of text we usually use less, so this CSS property is not common, Before I found this attribute I was using some other way (the first two Chinese laws) to achieve the vertical line of text.

Writing-mode properties are more, see the MDN in detail, the attributes used in vertical text are right-to-left vertical, left-to- writing-mode:vertical-rl writing-mode:vertical-lr right Vertical row

Code implementation

<style> #content1 {width:900px;    height:200px;    -WEBKIT-WRITING-MODE:VERTICAL-RL;    WRITING-MODE:VERTICAL-RL;    padding-top:40px; font-size:16px;}    #content2 {width:900px;    height:200px;    -WEBKIT-WRITING-MODE:VERTICAL-LR;    WRITING-MODE:VERTICAL-LR;    padding-top:40px; font-size:16px;} </style><div id= "Content1" > <p style= "letter-spacing:1em;font-size:20px;" > Water Song head </p> <p style= "LETTER-SPACING:.3EM;FONT-SIZE:18PX;" > Sushi </p> <p> when the moon has </p> <p> wine ask the blue Sky </p> <p> do not know Heaven Palace </p> <p> I ask is the year &L     T;/p> <p> I want to ride the wind return </p> <p> lest Qionglouyuyu </p> <p> High Place Cold </p> the dance clear the shadow <p> <p> what seems to be in the human world </p> <p> Zhu Ge yuzhou </p> <p> low kee home </p> <p> No sleep </p> <p> should not Have hate </p> <p> what long-time circle </p> <p> people have joys and sorrows </p> <p> months have cloudy clear round missing </p> <p> This matter all < /p> <p> I wish peopleLong </p> <p> Trinidad cicada Juan </p></div>
The demo of vertical text is realized by Write-mode way

 
 

  
  
 
   
Advantages and disadvantages of this approach:
Advantages: The way to achieve the text vertical row comparison of convenience and elegant disadvantage: more syntax, and there are two sets of different specifications (ie and CSS3)!
 
  
 
 
Note: Write-mode will change some of the original rules, such as the Content1 in our team above the P set row height, then the row height will become the left and right distance rather than the upper and lower line spacing.

 
 

  
  
 
   
If this article is wrong, please do not hesitate to enlighten!
 
   
The original title: several ways to realize the vertical line of Web page text
 
   
Original link: http://www.mengxiangjia.info/2017/04/05/text-landscape/
 
   
Copyright Disclaimer: Free Reprint-Non-commercial-non-derivative-retain attribution | Creative Commons by-nc-nd 3.0
 
  
 
 
Several ways to realize the vertical line of webpage text