하이픈 넣기

Internet Explorer 10 및 JavaScript로 작성된 Windows 8의 Windows 스토어 앱은 중요한 CSS 텍스트 수준 3 기능인 하이픈 넣기를 새롭게 지원합니다. 자동 하이픈 넣기는 새로운 다중 열 레이아웃 지원에서 특히 유용합니다. 구체적으로 CSS3(Cascading Style Sheets, Level 3) 하이픈 넣기를 사용하여 다음 작업을 할 수 있습니다.

  • 기본 제공 사전에 따라 자동으로 텍스트에 하이픈을 넣습니다.
  • 하이픈을 넣기 전에 한 단어에 있어야 하는 최소 문자 수를 지정합니다.
  • 하이픈 넣기 지점 이후 최소 단어 조각 길이를 지정합니다.
  • 하이픈 넣기 지점 이전 최소 단어 조각 길이를 지정합니다.
  • 하이픈 넣기 "영역"을 지정합니다. 이 영역 외부에서는 하이픈 넣기가 강제로 적용됩니다.
  • 하이픈을 넣은 줄의 최대 연속 수를 지정합니다.

참고  CSS3 텍스트 작업 초안에서 하이픈 넣기 부분은 임시 상태이기 때문에 Internet Explorer?10에서 작업하려면 이 항목의 속성을 Microsoft 특정 공급업체 접두사인 "-ms-"와 함께 사용해야 합니다.

다음 태그 예제는 하이픈 넣기 속성이 적용되지 않은 텍스트 일부를 보여 줍니다. 이 예제를 사용하여 하이픈 넣기 속성을 표시합니다.


<!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>


이 태그는 Internet Explorer 10에서 다음과 같이 나타납니다.

좁은 상자 내 양쪽 맞춤 텍스트에 하이픈 넣기 속성을 적용하지 않은 경우. 단어 사이에 상당한 간격이 있습니다.

-ms-hyphens 속성

-ms-hyphens 속성은 하이픈 넣기를 켭니다. 구문은 다음과 같습니다.

속성설명

-ms-hyphens

줄 내 개별 단어에 하이픈을 넣어 현재 줄의 분리 기회를 추가로 만들지 여부를 나타냅니다. -ms-hyphens 속성은 다음 값 중 하나로 설정할 수 있습니다.

none

소프트 하이픈(즉, &shy; 문자, 하이픈 넣기 "힌트")을 비롯한 모든 단어 분리가 표시되지 않음을 나타냅니다.

manual

단어 분리 기회가 제안되는 경우에만 단어 분리가 허용됨을 나타냅니다. 이러한 제안은 소프트 하이픈 또는 하드(수동 삽입) 하이픈 형태로 제공될 수 있습니다.

auto

제안된 단어 분리 기회 외에도 기본 제공 하이픈 넣기 사전에서 결정한 위치에 단어 분리 기회가 허용됨을 나타냅니다. 소프트 하이픈이 다른 하이픈 넣기 기회보다 우선하지만 하이픈 넣기 제어 속성에 의해 변경될 수 있습니다.

 

다음은 -ms-hyphens 속성을 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>


이 태그는 Internet Explorer 10에서 다음과 같이 나타납니다.

이전 그림과 동일한 좁은 상자 내 양쪽 맞춤 텍스트에 ‘auto’로 설정된 -ms-hyphens 속성을 적용한 경우. 여러 단어에 자동으로 하이픈을 넣어 간격이 이전 그림만큼 두드러지지 않습니다.

-ms-hyphenate-limit-zone 속성

-ms-hyphenate-limit-zone 속성은 하이픈 넣기 영역의 너비 또는 하이픈 넣기가 트리거되기 전에 줄에 유지할 수 있는 후행 공백(양쪽 맞춤 효과는 계산에서 제외)을 정의합니다. 구문은 다음과 같습니다.

속성설명

-ms-hyphenate-limit-zone

하이픈 넣기가 트리거되기 전에 줄에 유지할 수 있는 채워지지 않은 공백(양쪽 맞춤 앞)의 최대 크기를 지정합니다. 값은 음수가 아닌 비율(전체 줄 너비 기준) 또는 길이 값일 수 있습니다.

 

다음은 -ms-hyphenate-limit-zone 속성의 예제입니다.


<!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>


이 경우 영역 길이는 50픽셀입니다. 하이픈 넣기 영역에 포함되기 전에 끝난 텍스트가 양쪽 맞춤 앞에 포함된 줄은 실제로 하이픈을 넣은 단어 부분을 다음 줄에서 현재 줄로 "끌어옵니다". 다음 그림을 참조하세요. 이 경우 텍스트의 두 번째 줄과 여섯 번째 줄(분홍색으로 강조 표시됨)은 하이픈 넣기 영역으로 확장될 만큼 길지 않습니다. 따라서 다음 두 줄의 첫 번째 단어에 하이픈을 넣고 하이픈을 넣은 단어의 첫 번째 부분이 이전 줄로 이동됩니다.

하이픈 넣기 영역이 있는 콘텐츠 상자 내 텍스트 선택의 이전 및 이후 예제. “이전” 텍스트의 두 번째 줄과 여섯 번째 줄에는 하이픈 넣기 영역으로 확장되지 않는 텍스트가 포함되어 있습니다. “이후” 예제에서는 세 번째 줄과 일곱 번째 줄의 첫 번째 단어에 하이픈을 넣고 단어의 첫 번째 부분이 이전 줄의 끝으로 이동되었습니다.

-ms-hyphenate-limit-chars 속성

-ms-hyphenate-limit-chars 속성은 하이픈을 넣은 단어의 최소 문자 수를 나타냅니다. 구문은 다음과 같습니다.

속성설명

-ms-hyphenate-limit-chars

하이픈을 넣은 단어의 최소 문자 수를 나타내는 1-3개의 값을 지정합니다. 단어가 하이픈 앞이나 하이픈 뒤에 필요한 최소 문자 수를 충족하지 않을 경우 단어에 하이픈을 넣지 않습니다.

  • first value  단어에 하이픈을 넣는 데 필요한 단어의 최소 전체 문자 수입니다.
  • second value  단어에 하이픈을 넣는 데 필요한 하이픈 지점 앞의 최소 문자 수입니다.
  • third value  단어에 하이픈을 넣는 데 필요한 하이픈 지점 뒤의 최소 문자 수입니다.

auto 키워드를 사용하여 값을 일부 또는 전부 바꿀 수도 있습니다. auto 키워드는 5자 단어 제한, 하이픈 지점 앞에 2자 필요, 하이픈 지점 뒤에 2자 필요를 나타내는 "5 2 2" 값에 해당합니다.

이러한 값 중 하나를 생략할 경우의 결과를 확인하려면 -ms-hyphenate-limit-chars 속성 참조 페이지를 참조하세요.

 

다음은 -ms-hyphenate-limit-chars 속성의 사용 예입니다. 이 경우 "auto 3"으로 설정되어 최소 단어 크기는 자동(즉, 5)이고 하이픈 지점 앞과 뒤의 최소 문자 수는 3임을 나타냅니다. 따라서 이전 예제에서 two자 뒤에 하이픈을 넣은 단어인 "ultricies"에 더 이상 하이픈을 넣지 않습니다.


<!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>


이 태그는 Internet Explorer 10에서 다음 그림과 같이 나타납니다.

첫 번째 그림과 동일한 좁은 상자 내 양쪽 맞춤 텍스트에 ‘auto’로 설정된 -ms-hyphens 속성과 ‘auto 3’으로 설정된 -ms-hyphenate-limit-chars 속성을 적용한 경우. 이전에는 “ultiricies” 단어에서 2자 다음에 하이픈을 넣었지만 여기서는 하이픈을 넣지 않고 대신 단어가 다음 줄에 표시됩니다.

이제 "ultricies" 단어가 해당 줄에 하이픈 없이 표시됩니다.

-ms-hyphenate-limit-lines 속성

-ms-hyphenate-limit-lines 속성은 요소에서 하이픈을 넣은 최대 연속 줄 수를 나타냅니다. 구문은 다음과 같습니다.

속성설명

-ms-hyphenate-limit-lines

요소에서 하이픈을 넣은 단어로 끝날 수 있는 최대 연속 줄 수를 지정합니다. 이 속성은 정수 값이나 no-limit 키워드로 설정할 수 있습니다. 이 키워드는 하이픈을 넣은 단어로 끝날 수 있는 연속 줄 수에 제한이 없음을 나타냅니다.

 

API 참조

-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-hyphens

Internet Explorer 테스트 드라이브 데모

실습: 다중 열 레이아웃

IEBlog 게시물

IE10에서 서식 있는 텍스트 중심 페이지 빌드

사양

CSS 텍스트 모듈 수준 3: 섹션 6

 

 

표시:
© 2014 Microsoft