Three ways to make page text vertical

Web page vertical effect of the production method has three: Picture method, soft return method and style sheet (CSS) method, the following on the specific production methods described below:

　　 I. Picture method

The picture method can be divided into two kinds, one is grasping graph method, the other is drawing method

　　 1. Grasping Diagram method

Grasping the graph method is uses the word processing software like Word, WPS office and so on software, uses the vertical method to enter the text. Then press "Print screen" on the keyboard, then open the graphics software, paste into a new file, saved to adapt to network transmission of "Gif", "Png", "JPEG" format can be. It is strongly recommended that "GIF" be used because "GIF" can be used in less colorful pictures to make the file smaller. Of course, you can also use other capture software to complete, to see a person's preferences and convenience.

　　 2. Cartographic Law

Cartography is the use of popular graphics software Photoshop, Fireworks first to make the text into a vertical format, to save the corresponding picture format. However, there is a problem to note, usually this software by default, the text input display is anti-aliasing, so it looks bad. Here are two text images made with Photoshop 6.0, please compare:

Clearly, no use of Cheng teeth of the picture is more like the input text, the effect is better. The two pictures are made in one step, that is, "none" or "None" selected on the Text Properties toolbar of Photoshop 6.0, as shown in the following illustration:

Picture method is a good way, if the input of less text, do it very fast, and the size of the picture is not small, but also can be set for the text into a variety of fonts, do not need to consider the client has no corresponding font. The picture method has its advantage also has its inconvenient place, if is a long article, if makes the picture some typos, then must do again.

　　 second, soft return method

This method is in the production of Web pages directly for the need for vertical text input soft return, input method is to add a word for each input a soft return. Soft return Input: "Shift + return", in Dreamweaver and FrontPage are the same; another way is to add the tag "<br>" in the source window

This method may be the most troublesome, if the input is the entire article, you have to enter a good soft return, inefficient.


　　 third, style sheet (CSS) method

There are two important attributes in the style sheet's word processing properties: Writing-mode and Text-align. Let's take a look at their usage first:

　　 1. Writing-mode(Set object writing direction)

Syntax: WRITING-MODE:LR-TB, TB-RL
Parameters: Lr-tb: From left to right, from top down TB-RL: From top down, right to left
Example: div {writing-mode:tb-rl;}

　　 2. Text-align(Sets the alignment of text in an object)

Grammar: Text-align:left, right, center, justify
Parameters: Left: right-aligned right: Align Center: center justify: Justify
Example: div {text-align:center;}

　　 Next, let's make an example of a tight row:

< HTML >
< head >
< title > Vertical Text </title >
< style type= "Text/css" >
<!--
. TNT {WRITING-MODE:TB-RL; TEXT-ALIGN:LEFT;FONT-SIZE:9PT}
-->
</style >
< BODY >
< div class= "TNT" >
Indeed, the vertical line of presentation text is very easy to implement in word processing Office software. Since this effect is not much seen in the production of Web pages, the discussion on this issue is relatively small. But in the production of Chinese ancient characteristics of the site, such as the text history, calligraphy, tourist sites and so on site, if the use of vertical text, with the antique background and simple old colors, in the visual will get unexpected results.
</div >
</body >

　　 Sample text:

Indeed, the vertical line of presentation text is very easy to implement in word processing Office software. Since this effect is not much seen in the production of Web pages, the discussion on this issue is relatively small. But in the production of Chinese ancient characteristics of the site, such as the text history, calligraphy, tourist sites and so on site, if the use of vertical text, with the antique background and simple old colors, in the visual will get unexpected results.

Looking at examples and examples, we can know that for the text given the "Writing-mode" attribute value is "TB-RL", the text "from the top down" row, given the "Text-align" property value is "left", the text "Right-to-left" row. In summary, the contents of < div >......</div > will be arranged in a defined way.

The last point to be explained is "Writing-mode" currently only IE browser support, Nestscape Browser does not support!