텍스트 상자를 다듬기위한 두 개의 CSS 속성

CSS의 및 속성을 ​​통해 개발자는 첫 번째 텍스트 줄 위의 빈 공간의 양을 정확하게 제어 할 수 있으며 텍스트 상자의 마지막 텍스트 줄 아래에서 정확하게 제어 할 수 있습니다. 이 공백은 텍스트 상자의 수직 높이를 콘텐츠 높이보다 크게 만듭니다.

이 공백은 leading 예를 들어 50px 마진을 구현하지만 라인 간격이 37px 증가하면 총 87px 공간이 있습니다. 그런 다음 공간을 실제로 50px로 만들려면 마진을 13px로 조정해야합니다. text-box-trim 디자인 시스템 가이로서 가능한 한 많은 일관성을 유지하고 가능한 한 적은 마커를 사용하려고 노력하므로 인접한 Brother Selector ()를 사용하여 다음과 같은 공통 규칙을 만들 수 있습니다. text-box-edge 이 방법은 여전히 ​​계산을 수행해야하기 때문에 여전히 번거 롭습니다 (계산적으로 덜). 그러나 및 특성을 사용하면 CSS에 정의 된 50px 면책 조항 :

및 는 Chrome 128 및 Safari 16.4의 기능 플래그와 기능 플래그가없는 Safari 기술 미리보기를 통해서만 액세스 할 수 있습니다. 최신 브라우저 지원 정보는 Caniuse를 참조하십시오.

에서 시작하십시오

는 텍스트 상자 트리밍을 활성화하는 CSS 속성입니다. 그 자체로는 다른 목적이 없지만 시작, 종료, 시작 및 종료 또는 종료 옵션을 제공합니다.

참고 :

이전 웹 브라우저에서는 새 를 사용해야 할 수도 있습니다. 불행히도, 이것에 대한 참조가 없으므로, 당신은 무엇이 효과가 있는지 확인하면됩니다.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

이제, 어디에서 잘라 내고 싶습니까?

당신은 내가 무슨 뜻인지 알고 싶을 수도 있습니다. 타이포그래피 문자에는 여러 개의 피크가 있다고 생각하십시오. text-box-trim X 높이가 있는데, 이는 문자 "X"의 상단과 다른 소문자 문자 (오름차순 또는 상단 확장 제외), 대문자 높이를 표시하는 X 높이가 있습니다. 대문자 높이는 대문자의 상단을 표시합니다 (오름차순 또는 상단 확장 기능은 포함되지 않음) 및 문자 기준선 (대부분의 문자의 맨 아래를 포함하지 않음). 물론 리프팅 높이와 높이가 낮아집니다. text-box-edge X 높이, 자본 높이 또는 오름차순 높이와 텍스트 상자의 "위"가장자리 (상단 서기관이 시작되는 곳)와 문자 기준선 또는 더 낮은 서기 높이와 "아래쪽"가장자리 (가 밑면이 시작되는 경우) 사이의 블랭크를 다듬을 수 있습니다.

아무것도 다듬지 마십시오 text-underline-position under 는 모든 라인 간격이 포함되어 있음을 의미합니다. 이것은 또는 및

를 완전히 생략하는 것과 동일합니다. 를 사용하여 하단 가장자리 트리밍을 제한하거나

를 사용하여 상단 가장자리 트리밍을 제한 할 수 있습니다. 예, 이것을 전혀하지 않는 방법이 여러 가지가 있습니다!

새로운 웹 브라우저는 값을 삭제하고 "아직 출판하지 않음 (아직 출판하지 않음)"경고 (*Shrugging*)에도 불구하고 CSSWG 사양 작업 드래프트에서 벗어났습니다.

물론 text-box-edge: leading는 두 값 (상단 가장자리에 대한 지침, 하단에 대한 지침)을 수락합니다. 그러나 는 별도로 사용해야합니다. text-box-trim: none text-box-trim 나는 모든 시나리오를 설명 할 수 있지만 그 일이 작동하지 않지만 그중 어느 것도 유효하지 않습니다. 우리가 원하는 것은 상단 또는 하단 가장자리를 text-box-edge로 설정하고 다른 가장자리를 다른 것으로 설정할 수 있다고 생각하지만 정확히 그렇지 않습니다. 이것은 질문이지만 곧 더 깊이 파고들 것입니다. text-box-trim: trim-start 리프트의 상단 부분 및/또는 하부의 하단 부분을 다듬 으세요 text-box-trim: trim-end

첫 번째 값으로 사용되면 위의 부분이 두 번째 값으로 사용되면 아래쪽 아래 부분이 트림됩니다. (나는 당신이

가되기를 원하지만 그렇지 않을 것 같아요.) leading auto 리프트와 낮은 높이 측정은 글꼴 자체에서 (또는 그렇지 않거나!) 매우 까다로울 수 있다는 점에 주목할 가치가 있습니다. 예를 들어, Arial Fonts의 경우 상승의 높이에는 Diacritics가 포함되며, 가을의 높이에는 드롭이 포함되며, Fravances 글꼴의 경우 가을의 높이에는 Diacritics가 포함되어 있습니다. 따라서

로 의 이름을 바꾸는 것에 대한 논의가 있습니다.

자본 높이 위에만 여행 자본 높이 위로 다듬 으려면 : text-box-edge 명령어 값은 auto (위와 같이)가 아닌

로 기본값을 기억하십시오 (위에서 볼 수 있음). 따라서 아래쪽 가장자리를 다듬지 않도록 선택하려면 : 대신

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

를 사용해야합니다.

대문자 높이와 문자 기준선 아래로 auto. 대문자 높이를 다듬 으려면 문자의 기준선 아래에서 다음과 같습니다.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

그건 그렇고, Figma의 수직 트림 설정의 캡 높이에서 기준선 옵션이 정확하게 수행됩니다. 그러나 개발 모드는 쓸모없는 속성 이름 (

및 )과 쓸모없는 값 ( 및 leading-trim x 높이 이상의 트립 text-edge x 높이 이상으로 만 트림 : top 트립 X 높이 위와 아래의 문자 기준선 bottom 문자 기준 위와 아래에서 x 높이를 다듬려면 :

문자의 기준선 아래에서만 문자 기준 아래에서만 트림을 다듬려면 다음 가 유효하지 않아

(일이 너무 매끄럽게 진행되지 않았습니까?) :

.

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

이것은 첫 번째 값이 항상 필요한 상위 가장자리 값이기 때문에 두 번째 값은 선택적 하한 가장자리 값이기 때문입니다. 이것은

를 포함 시키면 우리가 하나를 제공하지 않는다는 것을 의미하더라도

는 유효한 상단 에지 값이 아님을 의미합니다. Verbose 불만과는 별도로 올바른 구문을 사용하면 실제로

를 취소하더라도 상단 값을 선언 할 수 있습니다.

상형 문자는 어디에 있습니까?

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

웹 브라우저 트림 전에 어떻게 정리 될지 알기가 어렵지만 사양의 모든 것을 읽을 수 있습니다. 이론적으로는 트리밍에

값을 사용하고 트리밍없이

값을 사용해야합니다. 둘 다 지원되지 않습니다.

, 약어 속성 텍스트 상자 트리밍의 동실함이 마음에 들지 않으면 속성이 덜 중요합니다. 동일한 규칙이 모두 적용됩니다.

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

최종 사고

언뜻보기에는 와 alphabetic가 그렇게 흥미롭지 않을 수도 있지만 간격 요소를 훨씬 간단하게 만듭니다. trim-end 그러나 현재 제안이 텍스트 상자 트리밍을 처리하는 가장 좋은 방법입니까? 개인적으로, 나는 그렇게 생각하지 않습니다. 나는 와 trim-end가 더 의미가 있다고 생각하고,

는 약어 속성으로 사용되며

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

는 전혀 사용되지 않지만 일부 단순화 및/또는 일관된 접근 방식을 기꺼이 받아 들일 것입니다. 어떻게 생각하나요?

다른 우려가 있습니다. 예를 들어, 밑줄, 오버 스코어, 구두점 마크 또는 디아크리트 자국을 포함시키는 옵션이 있어야합니까? 특히

를 사용하거나 특히 두껍게

를 사용하는 경우 요소 사이의 간격이 더 작게 보이게합니다. ideographic-ink

위 내용은 텍스트 상자를 다듬기위한 두 개의 CSS 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!