Hyphenation

[이 설명서는 임시 설명서로 변경될 수 있습니다.]

Windows Internet Explorer 10 and JavaScript를 사용한 Metro 스타일 앱 in Windows Developer Preview introduce support for an important CSS 텍스트 수준 3 feature: hyphenation. Automatic hyphenation is especially useful given the new support for multi-column layout. Specifically, by using CSS3(CSS 스타일시트, 수준 3) Hyphenation, you can do the following:

  • Hyphenate text automatically according to a built-in dictionary
  • Specify the minimum number of characters a word must have before it can be hyphenated
  • Specify a minimum word fragment length following a hyphenation break
  • Specify a minimum word fragment length preceding a hyphenation break
  • Specify a hyphenation "zone," outside of which hyphenation is forced
  • Specify a maximum number of consecutive hyphenated lines

참고  Because of the preliminary status of the Hyphenation portion of the CSS3 Text Working Draft, the properties in this topic must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10.

This topic contains the following sections:

The following markup example shows a small portion of text with no hyphenation properties applied. We use this example to show the hyphenation properties.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus. Curabitur scelerisque arcu a leo
  mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


This markup appears like this in Internet Explorer 10:

A short selection of justified text within a narrow box, with no hyphenation properties applied. There are significant gaps between words

The -ms-hyphens property

The -ms-hyphens property turns on hyphenation. Its syntax is shown here:

Property설명

-ms-hyphens

Indicates whether additional break opportunities for the current line are created by hyphenating individual words within the line. The -ms-hyphens property can be set to one of the following values:

none

Indicates that all word breaking is suppressed, including at soft hyphens (that is, the &shy; character, a hyphenation "hint").

manual

Indicates that word breaking is allowed only where word breaking opportunities are suggested. These suggestions can come in the form of soft hyphens or hard (manually inserted) hyphens.

auto

Indicates that, in addition to suggested word breaking opportunities, word breaking opportunities are allowed where determined by the built-in hyphenation dictionary. Soft hyphens take priority over other hyphenation opportunities, but are still subject to the hyphenation controlled properties.

 

Following is an example of the -ms-hyphens property in use, when it has been set to auto:


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus.
  Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


This markup appears like this in Internet Explorer 10:

The same short selection of justified text within a narrow box as the previous image, with the -ms-hyphens property set to ‘auto’ applied. The gaps are less pronounced than in the previous image, as several words have been automatically hyphenated

The -ms-hyphenate-limit-zone property

The -ms-hyphenate-limit-zone property defines the width of the hyphenation "zone," or trailing whitespace (not counting the effects of justification) that can be left in the line before hyphenation is triggered. Its syntax is shown here:

Property설명

-ms-hyphenate-limit-zone

Specifies the maximum amount of unfilled space (before justification) that can be left in the line before hyphenation is triggered. The value can be a nonnegative percentage (of the total line width) or a length value.

 

Following is an example of the -ms-hyphenate-limit-zone property.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-zone: 50px; text-align: justify; font-size: 11pt;">
  . . .
  </p>
  </div>
</body>
</html>


In this case, the zone length is 50 pixels. Any line that, before justification, would contain text that ended before the hyphenation zone would, in effect, "pull" a hyphenated part of a word from the next line into the current line. The following image shows this. In this case, the second and sixth lines of text (highlighted in pink) are not long enough to extend into the hyphenation zone. Therefore, the first word of both the following lines is hyphenated, and the first hyphenated portion of the word is moved onto the previous line.

A before-and-after example of  a selection of text inside a content box with a hyphenation zone. The “before” text’s second and sixth lines contain text that doesn’t extend to within the hyphenation zone. In the “after” example, the first word of the third and seventh lines has been hyphenated, and the first portion of the word has been moved up to the end of the previous line

The -ms-hyphenate-limit-chars property

The -ms-hyphenate-limit-chars property indicates the minimum number of characters in a hyphenated word. Its syntax is shown here:

Property설명

-ms-hyphenate-limit-chars

Specifies one to three values that indicate the minimum number of characters in a hyphenated word. If the word does not meet the required minimum number of characters, before the hyphen, or after the hyphen, the word is not hyphenated.

  • first value  The minimum number of total characters in a word required for the word to be hyphenated.
  • second value  The minimum number of characters before a hyphenation break that are required for the word to be hyphenated.
  • third value  The minimum number of characters following a hyphenation break that are required for the word to be hyphenated.

You can also use the auto keyword to replace any or all values. The auto keyword corresponds to the values "5 2 2", indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break.

See the -ms-hyphenate-limit-chars property reference page to find out what happens if you leave out one of these values.

 

Following is an example of the -ms-hyphenate-limit-chars property in use. In this case, it is set to "auto 3", which indicates that the minimum size of the word is automatic (that is, 5), and that the minimum number of characters both before and after a hyphenation break is 3. This means that the word that was hyphenated in the previous example after two characters, "ultricies," will no longer be hyphenated in that way.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; text-align: justify; font-size: 11pt;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac
  ultricies nisl rhoncus. Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor
  ornare.</p>
  </div>
</body>
</html>


This markup appears like the following image Internet Explorer 10:

The same short selection of justified text within a narrow box as shown in the first image, with the -ms-hyphens property set to ‘auto’ and the -ms-hyphenate-limit-chars property set to ‘auto 3’. The word “ultiricies,” which previously was hyphenated after two characters, is now unhyphenated and appears on the following line

Notice that the word "ultricies" now appears without hyphenation on its own line.

The -ms-hyphenate-limit-lines property

The -ms-hyphenate-limit-lines property indicates the maximum number of consecutive hyphenated lines in an element. Its syntax is shown here:

Property설명

-ms-hyphenate-limit-lines

Specifies the maximum number of consecutive lines in an element that can end with a hyphenated word. This property can be set to an integer value or to the no-limit keyword, which indicates there is no limit to the number of consecutive lines that can end with a hyphenated word.

 

관련 항목

IEBlog: Building Rich Text-Centric Pages in IE10
CSS
Internet Explorer 10 Guide for Developers

 

 

표시:
© 2014 Microsoft