Tài liệu HTML & CSS: The Complete Reference- P15 docx

676 P a r t I I : C o r e S t y l e

Note

• Under IE this property is known as –ms-layout-grid-char to correctly show it is

an extension.

layout-grid-line

This Microsoft-proposed CSS property defines the gridline value used for laying out

Japanese or Chinese characters in a Web document.

Syntax

layout-grid-line: none | auto | length | percentage

where length is any positive length unit and percentage is a value derived from the size of the

parent element the rule is applied to.

Example

<p style="layout-grid-line: 100px;">

A short text sample<br>

with line breaks so<br>

the meaning of this<br>

property will be obvious.</p>

Compatibility

No specification IE 5+

Note

• Under IE this property is known as –ms-layout-grid-line to correctly show it is

an extension.

layout-grid-mode

This Microsoft-proposed CSS property defines whether the text layout grid uses one or

two dimensions.

Syntax

layout-grid-mode: both | none | line | char

where line specifies to use a line grid, char specifies to use a character grid, and both

specifies to use both grids. A value of none turns all grids off. The default is both.

Example

<p style="layout-grid-mode: none; layout-grid-line: 100px;">

A short text sample<br>

with layout-grid-mode<br>

set to a value of none<br>

to turn off the grid.</p>

Compatibility

No specification IE 5+

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 677

PART II

Note

• Under IE 8+ this property is known as –ms-layout-grid-mode to correctly show it

is an extension.

layout-grid-type

This Microsoft-proposed CSS property defines the type of grid to be used for laying out

Japanese or Chinese characters in a Web document.

Syntax

layout-grid-type: fixed | loose | strict

where fixed is used for a monospace font layout, strict is used for most complex

ideographic character types, and loose is used for more alphabetic types like hiragana

in Japanese.

Example

<p style="layout-grid-type: strict; layout-grid-line: 55px;">

A short text sample would likely be in Chinese, not English.</p>

Compatibility

No specification IE 5+

Note

• Under IE 8+ this property is known as –ms-layout-grid-type to correctly show it

is an extension.

line-break

This property defines line-breaking rules for Asian text.

Syntax

line-break: normal | strict

Example

p {line-break: normal;}

Compatibility

No specification Chrome 1+, IE 5+, Safari 2+

Notes

• Under IE 8+ this property is known as –ms-line-break to correctly show it is an

extension. Under WebKit-based browsers this is called –webkit-line-break since

Safari 3.0 and –khtml-line-break since Safari 2.0.

• This property is deprecated according to Microsoft documentation and should be

replaced by word-break per the upcoming CSS3 specification.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

678 P a r t I I : C o r e S t y l e

marquee-direction

This property specifies the direction in which a marquee should move.

Syntax

marquee-direction: forward | reverse

See the notes for proprietary equivalents.

Example

<p style="overflow: auto;

overflow-x:-webkit-marquee;

display:-wap-marquee;

overflow-style: marquee-line;

width: 100px;

-webkit-marquee-direction:right;

-wap-marquee-dir: ltr;

marquee-direction:reverse;">

ABCDEFGHIJKLMNOPQRSTUVWXYZ

</p>

Compatibility

CSS3 Chrome 1+, Opera 8+, Safari 2+

Notes

• The default value is forward.

• This property can be replicated by using the HTML <marquee> tag and setting the

direction attribute to left | right | up | down.

• The property was supported under Safari 2 as –khtml-marquee-direction.

• This property is supported as -webkit-marquee-direction in Safari 3+. The

syntax is

-webkit-marquee-direction: ahead | auto | backwards | down | forwards |

left | reverse | right | up

• This property is supported as -wap-marquee-dir in Opera. The syntax is

-wap-marquee-dir: ltr | rtl

• According to the standard, the actual direction of the marquee movement will

depend on the overflow-style and direction of text flow in the document

according to Table 6-10.

overflow-style Direction Value Forward Direction Reverse Direction

marquee-line ltr Left Right

rtl Right Left

marquee-block Up Down

TABLE 6-10 Marquee Direction Logic

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 679

PART II

Of course, if the marquee-style is set to alternate, the directions will flip back

and forth.

marquee-play-count

This property defines how many times the marquee runs.

Syntax

marquee-play-count: positive number | infinite

Example

<p style="overflow: auto;

overflow-x:-webkit-marquee;

display:-wap-marquee;

overflow-style: marquee-line;

width: 100px;

-webkit-marquee-repetition:5;

-wap-marquee-loop: 5;

marquee-play-count:5;">

ABCDEFGHIJKLMNOPQRSTUVWXYZ

</p>

Compatibility

CSS3 Chrome 1+, Opera 8+, Safari 2+

Notes

• This property is replicable in many browsers using a <marquee> tag.

• The default value is 1, meaning the element performs its effect once.

• This property can be replicated using the HTML marquee tag and setting the loop

attribute to a number or infinite.

• This property is supported as -webkit-marquee-repetition in WebKit-based

browsers like Safari. It’s also known as -khtml-marquee-repetition in Safari 2.0.

In these browsers, the default is infinite. If it is not set to infinite, the element

will disappear after it completes the loops.

• This property is supported as -wap-marquee-loop in Opera browsers.

• For some reason, you may see a browser stop the marquee effect after a certain

number of iterations regardless of setting.

marquee-speed

This property defines how fast the marquee scrolls.

Syntax

marquee-speed: fast | normal | slow

Example

<p style="overflow: auto;

overflow-x:-webkit-marquee;

display:-wap-marquee;

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

680 P a r t I I : C o r e S t y l e

overflow-style: marquee-line;

width: 100px;

-webkit-marquee-speed:fast;

-wap-marquee-speed: fast;

marquee-speed:fast;">

ABCDEFGHIJKLMNOPQRSTUVWXYZ

</p>

Compatibility

CSS3 Chrome 1+, Opera 8+, Safari 2+

Notes

• This property is replicable in many browsers using a <marquee> tag.

• The default value is normal.

• The property is supported as –webkit-marquee-speed in Safari 3+ and -khtml￾marquee-speed in Safari 2.0.

• In Safari, there is an additional format:

-webkit-marquee-speed: distance / time

• The property is supported as –wap-marquee-speed in Opera browsers.

marquee-style

This property defines the motion of the marquee.

Syntax

marquee-style: alternate | scroll | slide

where alternate causes the marquee to bounce back and forth, scroll causes the

marquee to scroll completely off of one end before reappearing on the other end, and slide

causes the marquee to reset as soon as all of the content is visible.

Example

<p style="overflow: auto;

overflow-x:-webkit-marquee;

display:-wap-marquee;

overflow-style: marquee-line;

width: 100px;

-webkit-marquee-style:alternate;

-wap-marquee-style: alternate;

-wap-marquee-loop: infinite;

marquee-style:alternate;">

ABCDEFGHIJKLMNOPQRSTUVWXYZ

</p>

Compatibility

CSS3 Chrome 1+, Opera 8+, Safari 2+

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.