CSS 텍스트 모듈 레벨 4의 4가지 새로운 국제 CSS 기능이 Chrome에 도입됩니다. 이 게시물에서는 이미 발송된 상품 및 곧 출시될 상품을 설명합니다.
- Chrome 119부터:
word-break: auto-phrase가 포함된 일본어 구문 줄바꿈 - Chrome 120의 플래그 뒤:
text-autospace속성을 사용한 스크립트 간 간격 - 개발 중: 중국어, 일본어, 한국어 (CJK) 구두점이
text-spacing-trim속성으로 커닝됩니다. - 언어 전반에 걸쳐 일관된 최소 글꼴 크기
일본어 구문 줄바꿈: word-break: auto-phrase
이 기능은 일본어 텍스트의 가독성을 개선하며 Chrome 119부터 사용할 수 있습니다.
중국어 또는 일본어와 같은 일부 동아시아 언어는 단어를 구분하는 데 공백을 사용하지 않으며 선이 단어 중간에 있더라도 모든 문자에서 줄바꿈될 수 있습니다. 이러한 언어에서는 일반적인 줄바꿈 동작이지만, 제목이나 시와 같은 짧은 텍스트에서는 자연스러운 문구 경계에 줄바꿈을 하는 것이 좋습니다 (일본어에서는 이 경계를 '분세츠'라고 함).
새로운 CSS 기능 word-break: auto-phrase은 이러한 경계에서 래핑이 발생하도록 지정합니다.
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>
word-break: auto-phrase는 자연 구문 경계에서 줄을 래핑합니다.
경계 감지는 머신러닝 엔진에서 수행되므로 의도한 결과가 아닐 수 있습니다. 이 경우 파손 가능 지점을 수동으로 조정할 수 있습니다. <wbr> 태그 또는 제로 너비 공백 (​)은 깨질 수 있는 포인트를 강제하고 0너비 연결자 (‍)는 깨지는 것을 방지합니다.
窓ぎわの<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: no-autospace;
CJK 구두점 커닝: text-spacing-trim
다음 기능은 개발 중이며 Chrome에서 기본적으로 사용 설정될 예정입니다.
한국어, 중국어, 일본어에서는 구두점 문자 사이에 커닝을 적용하면 가독성이 향상되고 시각적으로 더 보기 좋은 서체가 생성됩니다. 오늘날 대부분의 인쇄 자료와 워드 프로세서가 이러한 커닝을 적용합니다.
예를 들어 CJK 마침표와 CJK 닫는 괄호는 일반적으로 글리프 공간의 오른쪽 절반에 글리프 내부 공백이 포함되도록 설계되어 각 문자가 일정한 간격으로 진행되도록 합니다.
그러나 문장 부호가 연속으로 표시되면 글리프 내부 공백이 과도하게 표시됩니다. 다음 두 예에서 두 번째는 올바른 서체입니다. CJK 마침표의 오른쪽 절반은 삭제해야 합니다.
기본 동작은 일반적으로 좋은 결과를 제공하지만 개발자는 text-spacing-trim 속성을 사용하여 다양한 스타일을 선택하거나 경우에 따라 이를 사용 중지할 수 있습니다.
언어 전반에 걸쳐 일관된 최소 글꼴 크기
Chrome 118 이전에는 10px 이하 글꼴 크기는 지정된 대로 렌더링되지 않았지만 언어가 한국어, 아랍어, 페르시아어, 일본어, 태국어, 간체 또는 중국어 번체인 경우 반올림되었습니다. 개발자는 작은 텍스트를 렌더링하는 해결 방법이 필요했습니다(예: transform 속성 사용).
Chrome 118부터 모든 언어에 대한 이 제한이 해제되어 7개 언어가 나머지 언어와 동일합니다. 이 변경사항은 다른 브라우저와의 상호 운용성을 개선합니다.
참여 및 의견 공유
이러한 기능에 관한 의견이 있으면 crbug.com에서 문제를 신고해 주세요.