HTML 이탤릭체는 용기로부터 돌출 (그리고 다음 컨테이너 배경에 의해 절단 될 수있다)

Question

은 (배경 프레젠테이션 용도 알파 0.2 있음) 문제를 설명하기 위해 : BREAK-의 http://jsfiddle.net/Novado/enhuc4jv/1/

<span style="font-family: impact; font-size: 500pt; font-style: italic;"> 
    <span style="border: 1px dotted #000;background-color: rgba(10, 10, 10, 0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200, 0, 0, 0.2);">World</span>&nbsp;&nbsp;</span><span style="border: 1px dotted green; background-color: rgba(200, 0, 0, 0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,0,200,0.2);">World</span>&nbsp;&nbsp;</span> 
</span> 

부족 기호는 의도적입니다. html 코드는 백엔드 생성되며 글꼴 스타일은 다를 수 있습니다. 슬프게도 이미지를 게시 할 수 없습니다. 예제에서 "nbsp;"- 기호를 삭제하면 첫 번째 단어의 마지막 문자가 다음 컨테이너의 배경에 의해 부분적으로 잘릴 것입니다. http://www.positioniseverything.net/explorer/italicbug-ie.html

(특히 자신의 기울임 형태의 'J', 'F'와 같은) 일부 문자에서 돌출하는 것이 정상입니다 :

나는 문제에 발견 모든 (물론, 다소)

이 링크입니다 컨테이너 상자 (패딩이없는 경우)

하지만 정확히 무엇입니까? 내가 아는 한 - 그것은 HTML 표준이지만 정확한 문서를 찾을 수 없으며이 문제의 추론을 찾을 수 없으며 ...

누군가가이 동작이 정상적인 것으로 간주되는 이유를 설명해 주시겠습니까? "배경 컷 - 문자"문제에 대한 좋은 해결책이 있습니까? 내가 보았던 모든 WYSIWYG는 이것에도 영향을 받지만 불평하는 사람을 만날 수는 없습니다 (음, 어쩌면 나는 알고있는 검색 쿼리를 빨아 들일 수도 있습니다).

Answer 1

올바르게 인용 된 문서는 글자가 컨테이너 상자의 테두리를 넘어 특히 이탤릭체로 나타날 수 있다고 설명합니다. 이것은 타이포그래피의 문제이므로 일부 CSS 소재가 HTML 또는 CSS 사양에서 언급하지는 않지만 HTML 또는 CSS 사양에는 지정되어 있지 않습니다. 컨테이너 상자는 인쇄 작가의 놀이터 일 뿐이며 때로는 국경을 넘기로 결정할 수도 있습니다. 컨테이너 상자의 높이는 글꼴 크기이고, 너비는 글리프의 진행 너비이며,이 양은 프로그램에서 텍스트를 배치 할 때 사용됩니다. 그들은 글리프를 제한하지 않습니다.

가짜 기울임 꼴 (이탤릭체 이탤릭체, 알고리즘으로 기울어 진 텍스트)이 사용되는 경우 더욱 그렇습니다. 이는 영향을 사용하고 기울임 꼴을 요청할 때 발생합니다. 기울임 꼴 글꼴이 없기 때문에 인쇄자가 디자인 한 기울임 꼴 모양의 기울임 꼴이므로 브라우저는 요청을 무시하거나 가짜 기울임 꼴을 만들어야합니다. 기울어 진 모양을 제외하고 글자의 모양이 변하지 않으므로 "기울임 꼴"모양을 보통과 다르게 만들기 위해 경사 각도가 상당히 커야합니다. 그리고 기울어 진 양은 컨테이너 상자의 오른쪽 테두리를 교차 할 가능성이 더 큽니다.

클래식 타이포그래피에서 이러한 문제는 필요할 때 간격을 추가하여 해결할 수 있습니다. 이것은 자동화하기가 어렵고 요즘 대부분 수행되지 않습니다. CSS에서는 padding-right을 사용할 수 있지만 일반적으로 단어 또는 문자를 요소 (일반적으로 span)로 묶어야합니다. 예를 들어 스타일을 적용 할 항목이 있어야합니다.

<span style="padding-right: 0.08em">World</span> 

또는

<i style="padding-right: 0.08em">World</i> 

이 간격의 양이 마지막 편지에 (그리고 글꼴에 어쩌면 다음 단어의 첫 글자에 의존 할 필요가 특히 이후, 물론, 복잡). 또는 리드 타이포그래피에 사용 된 방법과 일치하는  과 같은 고정 너비의 공백을 사용할 수 있지만 (문자를 인쇄 한 후에 좁은 금속 조각을 배치 함) 유연하지 않고 신뢰할 수 없습니다 (해당 문자의 너비 실제로 글꼴에 따라 다릅니다.)