This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Read not in the middle of the night five drum, work is work by fits and starts. After watching feel have harvest, point a like bai!!

preface

In the last two articles on text properties, we have basically learned a lot of properties that we haven’t used before. Today we will look at more text properties. The world of CSS is subtle and endless, but hopefully with these three articles, you can get into the basics of CSS. Life is short, there is no end to learning.

text-justify

compatibility

This attribute is currently listed as “at risk” and is discarded during candidate recommendations. Therefore, use of this attribute in production is not recommended, as it is unlikely to become standard for all browsers in the near future.

Poor compatibility, currently only firefox can be used!! Only learning.

define

Rules text – align: the justify; The alignment used.

Text-align: text; text-align: text; At the same time, if you don’t already know how to text: justify; What is it? Please read it immediatelyTextalign family text properties (part 1)Come back to the article after reading it.

Attribute values

auto

Default value that allows the browser to determine whether the alignment is better handled as inter-word or Inter-character. This is helpful in multilingual scenarios where the content language is unknown before rendering.

inter-word

Specify text alignment by adjusting word spacing

inter-character

Specifies text alignment by adjusting character spacing

Maybe the screenshots of inter-word and Inter-character are not clear, so put a comparison picture.

First slide: inter-characterThe second picture: Inter-WordLook closely at the two most obvious ones:Not so easy A Your worst battle isIn the first picture “your”, the spacing between characters is relatively large. In the second chapter “Your Worst”, the spacing between characters is relatively large

none

Disable the alignment method. Eliminate the inter-word and Inter-character attributes of the parent element

distribute

Has been abolished and is not recommended for use

The pro test appears as follows in Firefox

text-orientation

compatibility

Browser compatibility is good, except for IE (always a nightmare)

define

To change the direction of a character when the writing mode is vertical.

Vertical writing mode

  1. writing-mode: vertical-lr;

  1. writing-mode: vertical-rl;

Attribute values:

mixed

The default value. The characters in a horizontal script are rotated 90° clockwise. Looking closely at the English and numbers in the screenshot, the direction is rotated by 90°.

upright

This value rotates the character itself from a rotation of 90° to its natural position. Note that this keyword causes all characters to be treated as left to right, that is, direction is forced to LTR (left to right).

sideways

In vertical writing mode, all text is displayed horizontally, just as in horizontal layout, with the entire line rotated 90° clockwise.

Sideways – right:

Some browsers treat this value as an alias for the value of sideways reserved for backwards compatibility.

text-combine-upright

First of all, I think this attribute is a supplement to the text-orientation. Its main function is to put some characters on one line. For example, 13 frequently appears in the screenshot above, and in vertical mode, it is displayed in two lines. In order for them to be displayed on one line you need this property.

compatibility

Firefox and Google compatibility is still good, you can use.

Attribute values

all

All consecutive typesetting characters in a vertical inclusion box are displayed horizontally on the same line, occupying the space of a single character in a vertical inclusion box. Please read this sentence carefully!!

All example 1
writing-mode: vertical-lr; text-combine-upright: all; < P > I said, "Dad, you can go." He looked out of the window and said, "I'm going to buy you some oranges. You stay here and don't move about." I saw several vendors waiting for customers beyond the railings of the platform. To reach that platform, one had to cross the railway line and jump down and climb up. Father was a fat man, so it would be difficult for him to go. I wanted to go, but he refused, so I had to let him go. I saw him in his black skullcap, black cloth mandarin jacket and dark blue cotton-padded cloth long gown, staggering to the railway track and leaning slowly down. It wasn't too difficult. But it was not easy for him to climb up the platform after crossing the railway track. </p>Copy the code

The end result:

Is not the moment understand, let you read the reason carefully!!

All example 2
p{ writing-mode: vertical-lr; } span{ text-combine-upright: all; } < P > I said, "Dad, you can go." He looked out of the window and said, "I'm going to buy you some oranges. You stay here and don't move about." <span id="leftSpan" style =" font-size: 14px; </p>Copy the code

The end result

Now, the browser doesn’t know which characters to display on a line, so we need to specify which characters to display on a line.

digits <integer>

compatibility

For this property, a compatibility diagram is shown. As you can see from the diagram, this property is almost unusable

All consecutive ASCII numbers in a vertical inclusion box are displayed horizontally on the same line, occupying the space of a single character in a vertical inclusion box, up to a specified integer. If no integer is specified, the default value is 2 bits. Anything below 2 and above 4 is invalid.

grammar

text-combine-upright: digits 2;