CSS 리드믹 사이징 모듈 레벨 1

1. 소개

이 사양은 사용 사례에서 원하는 규칙에 따라 CSS 객체의 크기를 제어하기 위한 기능을 제공합니다.

CSS 객체의 크기가 스텝 단위의 배수가 되도록 제어하는 것은 많은 경우에 바람직합니다. 이 사양의 이 레벨은 다음의 경우에 초점을 맞춥니다.

• 블록 수준 박스의 높이를 지정된 길이의 배수로 조정합니다.

• 라인 박스의 높이를 지정된 길이의 배수로 조정합니다.

블록을 배수 단위로 쌓음으로써, 작성자는 열, 페이지, 스크롤 스냅된 bocks 또는 절대 배치된 여러 블록에 걸쳐 콘텐츠를 정렬하여 수직 리듬을 유지할 수 있습니다.

또한 라인 박스의 높이를 제어함으로써, 서로 다른 글꼴의 텍스트 줄도 일관된 시각적 결과를 만들어 가독성을 높일 수 있습니다.

1.1. 동아시아 캐주얼 수직 리듬

동아시아에서는 수직 리듬의 캐주얼 변형이 널리 사용됩니다.

수직 리듬은 일반적으로 전문 타이포그래피에서 사용됩니다. 이는 가독성을 향상시키지만, 그 간격 제약은 공간에 대한 신중하고 면밀한 설계를 요구합니다.

동아시아의 캐주얼 변형은 원래 80년대 전통적인 워드 프로세서의 기술적 제약의 산물이었습니다. 그러나 더 현대적인 기술에서 그 기술적 제약이 해소되자, 표의문자(ideographic) 문자의 정사각형에 가까운 시각적 특성의 도움을 받아, 동아시아 작성자들은 그 특성의 일부를 유지하는 것을 선호했습니다.

이 수직 리듬 변형에서는, 비전문 작성자가 사용하기 쉽도록 요구사항이 완화됩니다. 텍스트는 여전히 리듬 위에 놓이므로, 대부분의 표의문자 문자는 대체로 격자 위에 위치하지만, 작성자가 테두리, 마진 또는 리듬을 깨뜨릴 수 있는 다른 객체를 지정하면, 리듬은 강제되기보다는 이동됩니다. 엄격한 수직 리듬은 이러한 경우 강제 점프로 인해 비전문 작성자를 종종 놀라게 하지만, 이 변형은 텍스트의 리듬과 비전문 작성자를 위한 사용 편의성을 결합합니다.

이 변형은 90년대 중반 이후 동아시아에서 매우 널리 받아들여져, 동아시아에서 사용되는 대부분의 주요 워드 프로세서가 기본적으로 유사한 기능을 제공했습니다.

동아시아 출판 타이포그래피에서 수직 리듬은 중요한 특성 중 하나이지만, 다른 특성과 비교했을 때의 우선순위는 문서 유형에 따라 달라집니다. 단일 열 문서에서는, 다단 문서에 비해 우선순위가 더 약합니다. 텍스트는 수직 리듬 위에 있어야 하지만, 테두리, 마진 또는 다른 특성이 리듬보다 우선하도록 하는 것이 종종 선호됩니다. 이러한 경우 리듬은 캐주얼 변형과 유사하게 이동됩니다.

이 사양에서는, line-height-step 속성이 block-step 속성 또는 line-grid 속성과의 조합 없이 사용될 때, 동아시아 캐주얼 수직 리듬과 유사한 효과를 생성합니다.

이는 또한 동아시아 출판 타이포그래피에도 유용할 수 있으며, 원하는 수직 리듬의 강도에 따라 달라집니다.

다른 수직 리듬의 경우에는, block-step 속성 또는 line-grid 속성을 사용하거나, 또는 line-height-step 속성을 이들과 함께 사용하게 될 것으로 예상됩니다.

1.2. 값 정의

이 사양은 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 구문을 [CSS-VALUES-3]에서 사용합니다. 이 사양에서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합은 이러한 값 유형의 정의를 확장할 수 있습니다.

각 정의에 나열된 속성별 값들 외에도, 이 사양에서 정의된 모든 속성은 CSS 전역 키워드도 해당 속성 값으로 허용합니다. 가독성을 위해 여기서는 명시적으로 반복하지 않았습니다.

2. 블록 수준 박스 높이 조정

가장 흔한 타이포그래피 리듬 문제는 블록 수준의 침범입니다: 연속된 단락 수준 텍스트가 삽화나 제목과 같이 크기가 다른 콘텐츠에 의해 중단되면, 줄-대-줄 리듬이 깨질 수 있습니다. 블록 스텝 속성은 이러한 요소의 높이를 지정된 스텝 크기�� 배수로 제한함으로써 리듬 간격에 맞추어 끼워 넣을 수 있게 합니다. 이를 통해 중단 전후의 콘텐츠가 연속적인 리듬을 유지할 수 있습니다.

블록 스텝 속성을 일관되게 사용하면 병렬 콘텐츠 흐름에 필요한 엄격한 격자 레이아웃을 만들 수 있지만, 요소별로 스텝 크기를 지정하면 일부 중단 요소는 흐름에서 자연스러운 크기를 유지하고, 이후 수직 리듬을 다시 시작할 수도 있습니다. 이는 단일 열 레이아웃에서 유용할 수 있는데, 시각적 연속성을 위해 수직 리듬을 유지하는 것이 중요하지만 나란히 정렬할 대상이 없기 때문입니다. 이러한 경우에는, 전후 흐름을 시각적으로 단절시키는 큰 중단 요소에 대해 연속 격자에 대한 엄격한 준수보다 항목 주변의 최적 간격을 우선시할 수 있습니다 (초기값인 block-step: none을 지정함으로써).

이 제안은 block-step-size 속성만으로도 단순화할 수 있으며, block-step로 축약된 형태를 통해서만 표현할 수 있습니다. 이 레벨은 많아야 block-step-size와 block-step-insert만 포함할 가능성이 높으며, block-step-align과 block-step-round은 향후 필요가 생기면 추가될 것입니다. 전체 설계는 현재 논의를 위해서와 향후 참고를 위해 본문에 기술되어 있습니다.

이 제안은 현재 블록 수준 박스에만 적용되도록 정의되어 있습니다. 이 제한은 첫 번째 반복을 단순화하기 위한 것일 뿐이며, 궁극적으로는 지정된 높이를 존중하는 모든 레이아웃 모드로 확장되어야 합니다.

2.1. 스텝 크기 지정: block-step-size 속성

이 속성은 블록 수준 박스의 블록 크기에 대한 스텝 단위를 정의합니다. 스텝 단위가 양의 <length>로 설정되면, 박스의 바깥쪽 높이는 반올림되어 ( block-step-round 참조) 단위의 가장 가까운 배수로 맞춰집니다. 음수 <length> 값은 유효하지 않습니다.

none 이외의 값은 박스가 독립적인 포매팅 컨텍스트를 설정하게 합니다.

참고: 이는 조상(ancestor)의 플로트가 박스 안으로 돌출되는 것으로 인해 발생하는 복잡성을 피하기 위함입니다: 유효한 상단 마진이나 패딩을 변경하면 어떤 콘텐츠가 플로트의 영향을 받는지와 그 정도가 바뀔 수 있어, 재레이아웃이 필요할 수 있습니다 (그리고 박스의 높이가 내용에 의존하는 경우 잠재적으로 순환을 만들 수 있습니다).

이러한 순환을 끊는 가장 좋은 방법일까요? [Issue #1901]

마진이 겹쳐지는 상황에서는, 바깥쪽 크기를 계산할 때 박스 자체의 마진만 고려됩니다.

박스가 조각(fragment)으로 나뉘는 경우, 스텝 사이징은 각 조각마다 적용됩니다.

이를 text-box-edge/text-box-trim의 상속 및 적용 모델과 정렬해야 할까요? [Issue #1902]

2.2. 간격 유형 지정: block-step-insert 속성

이 속성은 block-step-size 적용으로부터 도출되는 추가 간격이 ( padding처럼) 박스 테두리 안쪽에 추가 공간으로 삽입되는지, 또는 ( margin처럼) 박스 테두리 바깥쪽에 삽입되는지, 혹은 콘텐츠에 사용 가능한 높이를 변경하는지 ( min-height 또는 max-height처럼) 를 지정합니다.

값의 의미는 다음과 같습니다:

margin-box

block-step-size로 인한 조정 결과로 생기는 추가 공간은 박스 테두리 바깥쪽에 추가 마진으로 삽입됩니다.

padding-box

block-step-size로 인한 조정 결과로 생기는 추가 공간은 박스 테두리 안쪽에 추가 패딩으로 삽입됩니다.

content-box

block-step-size로 인한 조정 결과로 생기는 추가 공간은 콘텐츠 영역의 높이를 증가시켜 박스 테두리 안쪽에 삽입됩니다.

2.3. 정렬 지정: block-step-align 속성

이 속성은 block-step-size 적용으로부터 도출되는 추가 간격이 박스의 앞쪽에 삽입되는지, 뒤쪽에 삽입되는지, 또는 양쪽으로 나뉘어 삽입되는지를 지정합니다.

값의 의미는 다음과 같습니다:

auto

block-step-insert가 margin-box인 경우: align-self가 start, end, 또는 center이면, 해당 값으로 취급하고, 그렇지 않으면 center로 취급합니다.

center

block-step-size로 인한 조정 결과로 생기는 추가 공간은 나뉘어, 박스의 양쪽에 절반씩 적용됩니다.

start

block-step-size로 인한 조정 결과로 생기는 추가 공간은 박스의 끝(end) 쪽에 삽입됩니다.

end

block-step-size로 인한 조정 결과로 생기는 추가 공간은 박스의 시작(start) 쪽에 삽입됩니다.

align-content와의 상호작용을 정의하세요. [Issue #11206]

모든 경우에서, 강제되지 않은 조각화 분할에 의해 잘리거나 생략되는 마진에는 추가 간격을 더할 수 없습니다 ( [CSS3-PAGE] 및 [CSS-BREAK-3] 참조); 따라서 block-step-insert가 margin-box인 경우, block-step-size 적용으로부터 도출되는 모든 추가 공간은 조각의 반대쪽에 삽입되어야 합니다 ( block-step-align와 무관하게).

이 규칙이 올바른가요? 아니면 조각화 경계에서도 block-step-align을 존중해야 할까요? [Issue #1260]

2.4. 반올림 방법: block-step-round 속성

이 속성은 block-step-size로 인해 발생하는 조정이 양의 공간을 삽입하는지, 또는 음의 공간을 삽입하는지를 지정합니다.

값의 의미는 다음과 같습니다:

up

박스의 바깥쪽 크기는 증가하며(양의 공간이 삽입됨), block-step-size 제약을 충족합니다.

down

박스의 바깥쪽 크기는 감소하며(음의 공간이 삽입됨), block-step-size 제약을 충족합니다.

nearest

박스의 바깥쪽 크기는 증가( up과 같음)하거나 감소( down과 같음)하며—​어느 쪽이든 절대 변화량이 더 작은 쪽을 선택하여—​ block-step-size 제약을 충족합니다. 두 선택지가 동일한 변화량을 만든다면, 크기는 증가합니다.

2.5. 블록 스텝 조정 단축 표기: block-step 단축 표기

이 단축 속성은 block-step-size, block-step-insert, block-step-align, 그리고 block-step-round를 한 선언에서 설정할 수 있게 합니다. 생략된 값은 해당 속성의 초기값으로 설정됩니다.

작성자는 개별 롱핸드가 독립적으로 캐스케이드되어야 하는 특정 필요가 없는 한, 롱핸드 대신 이 단축 표기를 사용할 것을 권장합니다.

3. 라인 박스 높이 조정: line-height-step 속성

이 속성은 라인 박스 높이에 대한 스텝 단위를 정의합니다. 스텝 단위는 수직 리듬의 길이로, 보통 본문 텍스트의 한 기준선(baseline)에서 다음 기준선까지의 거리입니다. 본문 텍스트는 하나의 스텝 단위 안에 들어가야 하며, 제목과 같은 더 높은 줄은 두 개 이상의 스텝 단위 높이를 가져야 합니다. 수직 리듬은 모든 줄의 높이를 스텝 단위의 정수 배로 만들면서 생성됩니다.

스텝 단위가 양의 <length>로 설정되면, 라인 박스 높이는 단위의 가장 가까운 배수로 올림 반올림됩니다. 음수 <length> 값은 유효하지 않습니다.

[CSS2] §10.8 라인 높이 계산은 인라인 수준 콘텐츠로부터 라인 박스의 높이를 계산하는 방법을 정의합니다. 반올림은 계산된 라인 박스 높이에 적용되며, 추가 공간은 라인 박스의 over 쪽과 under 쪽에 동일하게 분배되어, 원래 라인 박스가 스텝 단위 배수의 중앙에 위치한 것처럼 보이게 합니다. 이 조정은 라인 박스 안에 조정된 A'와 D'를 가진 인라인 수준 박스가 있다고 가정함으로써 수행됩니다. 이 인라인 수준 박스는 vertical-align 속성의 정렬 지점에 영향을 주지 않으며, 라인 박스에 대해 상대적으로 정렬하는 값의 경우에만 예외입니다.

다음 예제에서는, 각 단락에서 라인 박스의 높이가 스텝 단위로 올림 반올림됩니다.

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
p {
  margin: 0;
}

<h1>의 라인 박스는 하나의 스텝 단위에 들어맞지 않으므로 두 칸을 차지하지만, 여전히 두 개의 스텝 단위 안에서 중앙에 배치됩니다.

$gu: 18px;

@function gu($n) {
  @return $n * $gu;
}

h1 {
  font-size: 20pt;
  margin: gu(1.2) auto gu(1.8);
}

4. 개인정보 고려사항

이 사양은 “올바르게 구현하라”를 넘어서 새로운 개인정보 유출을 도입하지 않습니다.

5. 보안 고려사항

이 사양은 “올바르게 구현하라”를 넘어서 새로운 보안 고려사항을 도입하지 않습니다.

6. 감사의 글

이 사양은 다음 분들의 도움 없이는 가능하지 않았습니다: Masaharu Akutsu, Yoko Aoki, Takao Baba, Chris Eppstein, Ichiro Inaba, Jxck, Noriko Kase, Motoya Kinoshita, Shinyu Murakami, Tsutomu Nanjo, Kiyoshi Narishima, Charlie Neely, Takuya Nishimura, Katsuhiro Osumi, Florian Rivoal, Hiroshi Sakakibara, Alan Stearns, Masataka Yakura, KADOKAWA Corporation, PixelGrid Inc., 그리고 CSS 워킹 그룹 구성원들.

7. 변경사항

최초 공개 작업 초안 이후 변경사항은 다음을 포함합니다:

• 서론에 동아시아 캐주얼 수직 리듬과의 상호작용을 추가했습니다.

• 잘린 마진의 처리 방식을 정의했습니다. (Issue 1260)

• margin-box를 block-step-insert에 추가하고, 다른 값들은 *-box 패턴에 맞추기 위해 이름을 변경했습니다. (Issue 10486)

• line-height-step에서 none 값을 제거했습니다. (Issue 1151)

• block-step의 조각화(fragmentation)와의 상호작용을 정의했습니다.

• 속성 메타데이터를 최신 관행에 맞추었습니다.

• Web Platform Tests 커버리지를 추가했습니다.

• 편집 개선 및 버그 수정.