이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS의 4가지 새로운 국제 기능 소개

Jack J

CSS 텍스트 모듈 레벨 4의 새로운 국제 CSS 기능 4가지가 Chrome에 도입됩니다. 이 게시물에서는 이미 발송된 항목과 곧 발송될 항목을 설명합니다.

Chrome 119부터: word-break: auto-phrase를 사용하여 일본어 문구 줄바꿈
Chrome 120의 플래그 뒤에 text-autospace 속성을 사용한 스크립트 간 간격이 있습니다.
개발 중: text-spacing-trim 속성을 사용한 중국어, 일본어, 한국어 (CJK) 구두점 커닝
언어 간에 일관된 최소 글꼴 크기

일본어 문구 줄바꿈: `word-break: auto-phrase`

이 기능은 일본어 텍스트의 가독성을 개선하며 Chrome 119부터 사용할 수 있습니다.

중국어 또는 일본어와 같은 일부 동아시아 언어에서는 단어를 구분하는 데 공백을 사용하지 않으며, 단어 중간에 있더라도 어떤 문자에서든 줄바꿈이 이루어질 수 있습니다. 이는 이러한 언어의 일반적인 줄바꿈 동작이지만 제목이나 시와 같은 짧은 텍스트에서는 자연스러운 구문 경계에서 줄을 바꾸는 것이 좋습니다. 일본어에서는 이 경계를 'Bunsetsu'라고 합니다.

새 CSS 기능 word-break: auto-phrase는 이러한 경계에서 줄바꿈이 이루어져야 한다고 지정합니다.

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>

word-break: auto-phrase는 자연스러운 구문 경계에서 줄을 래핑합니다. — `word-break: auto-phrase`는 자연스러운 구문 경계에서 줄을 바꿉니다.

경계 감지는 머신러닝 엔진에서 실행되므로 의도한 결과가 나오지 않을 수 있습니다. 이 경우 시점 조절 가능 부분을 수동으로 조정할 수 있습니다. <wbr> 태그 또는 영폭 공백 (&ZeroWidthSpace;)은 단절 지점을 적용하고 영폭 연결자 (&zwj;)는 단절을 방지합니다.

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

현재 Chrome은 AdaBoost ML 기술을 사용하는 BudouX C++ 포트를 사용하여 일본어로만 이 기능을 지원합니다. Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器에서 자세히 알아보세요.

향후 Chrome 버전에서는 한국어와 중국어를 지원할 계획입니다.

스크립트 간 여백: `text-autospace`

다음 기능은 현재 Chrome에서 플래그 뒤에 있습니다. 테스트하려면 Chrome 120 이상에서 실험용 웹 플랫폼 기능 플래그 (chrome://flags/#enable-experimental-web-platform-features에 있음)를 사용 설정하세요.

중국어와 일본어는 여러 문자(한, 라틴, ASCII 숫자)를 혼합하며, 일본어의 경우 히라가나와 가타카나도 혼합합니다. 한외 문자에서 한외 문자로 전환할 때 작은 간격을 두면 가독성이 향상되는 경우가 많습니다.

Chrome에서는 기본적으로 스크립트 간 간격을 삽입할 계획입니다. 이 기능은 인쇄물에서 가독성을 높이기 위해 널리 사용되는 일반적인 관행을 웹에 도입합니다.

새로운 기본값은 가독성을 높이기 위해 작은 간격을 적용하며, 이는 text-autospace로 제어할 수 있습니다. — 새로운 기본값은 가독성을 높이기 위해 작은 띄어쓰기를 적용하며, 이는 `text-autospace`로 제어할 수 있습니다.

이 동작을 사용 중지하려면 text-autospace 속성을 사용하여 간격 삽입을 제어하면 됩니다.

text-autospace: no-autospace;

CJK 구두점 커닝: `text-spacing-trim`

다음 기능은 Chrome에서 기본적으로 사용 설정될 수 있도록 개발 중입니다.

중국어, 일본어, 한국어의 경우 구두점 문자 사이에 커닝을 적용하면 가독성이 개선되고 시각적으로 더 만족스러운 서체를 만들 수 있습니다. 오늘날 대부분의 인쇄물과 워드 프로세서에서는 이 커닝을 적용합니다.

예를 들어 CJK 마침표와 CJK 닫는 괄호는 일반적으로 각 문자의 전진이 일정하도록 글리프 공간의 오른쪽 절반에 글리프 내부 간격이 있도록 설계됩니다.

그러나 이러한 구두점 문자가 한 줄에 표시되면 글리프 내부 간격이 과도해집니다. 다음 두 예시에서 두 번째 예시가 올바른 서체입니다. CJK 마침표의 오른쪽 절반은 삭제해야 합니다.

구두점이 한 줄에 연속으로 표시되는 경우 CJK 마침표의 오른쪽 절반을 삭제해야 합니다. — 구두점이 한 줄에 연속으로 표시되면 CJK 마침표의 오른쪽 절반을 삭제해야 합니다.

기본 동작은 일반적으로 좋은 결과를 제공하지만 개발자는 text-spacing-trim 속성을 사용하여 다른 스타일을 선택하거나 경우에 따라 사용 중지할 수 있습니다.

언어별로 일관된 최소 글꼴 크기

Chrome 118 이전에는 10px 미만의 글꼴 크기가 지정된 대로 렌더링되지 않고 언어가 아랍어, 페르시아어, 일본어, 한국어, 태국어, 간체 중국어 또는 번체 중국어인 경우 반올림되었습니다. 개발자는 transform 속성을 사용하는 등 작은 텍스트를 렌더링하기 위한 해결 방법이 필요했습니다.

Chrome 118부터 이 한도가 모든 언어에 대해 해제되어 7개 언어가 나머지 언어와 일치하게 됩니다. 이 변경사항으로 인해 다른 브라우저와의 상호 운용성이 향상됩니다.

Chrome 118부터 아랍어, 페르시아어, 일본어, 한국어, 태국어, 중국어 간체 또는 중국어 번체의 경우 10px 미만의 글꼴 크기가 지정된 대로 렌더링되지 않는다는 제한이 사라집니다. — Chrome 118부터 아랍어, 페르시아어, 일본어, 한국어, 태국어, 중국어(간체 또는 번체)의 경우 글꼴 크기가 10px 미만이면 지정된 대로 렌더링되지 않는다는 제한사항이 사라집니다.

참여 및 의견 공유

이러한 기능에 관한 의견이 있으면 crbug.com에서 문제를 신고해 주세요.