페이징 된 미디어 모듈의 표 셀에 대한 세로 텍스트는 어떻게 작동합니까?

Question

첨부 된 css3 (페이징 된 미디어 모듈)이있는 html 문서에서 PDF 파일을 렌더링하기 위해 안테나 하우스 포맷터 도구 (v6.3)와 함께 작업합니다.

테이블 셀의 텍스트를 반 시계 방향으로 90도 회전하고 싶습니다. 회전 된 표 셀의 높이가 자동으로 설정되어야합니다.

HTML 코드

<td class="center middle verticaltext" rowspan="1" colspan="1"> 
    <div class="vtext"> 
    <b>Number of joints /</b> 
    <p> 
     <b>Number of bolts per joint</b> 
    </p>             
    </div> 
</td> 

당신은 테이블 셀이 헬퍼 클래스도 셀 상속 콘텐츠에 대한 회전 래퍼 사업부를 가지고 볼 수 있듯이.

CSS 코드

tr > *.verticaltext > .vtext { 
    writing-mode: vertical-rl; 
    transform: rotate(-180); 
} 

렌더링 결과 (PDF)

렌더링 된 결과는 특이한 대형 문자 간격이있다. 또한 텍스트 맞춤 및 수직 맞춤 CSS 속성은 더 이상 적용되지 않습니다 (예 : 도우미 클래스 및 중간, td에 도우미 클래스).

표 셀 내용을 회전시키고 래퍼 너비 (자동)를 유지하는 간단한 방법이 있습니까? 당신은이 모두 텍스트 방향에 영향을주는 명령 사용하고

Answer 1

:

transform: rotate(-180);이 텍스트를 회전합니다.

writing-mode: vertical-rl; 쓰기 모드 (서로 아래의 문자)를 설정합니다. 일본어. 귀하의 문자 간격은 이것의 부작용이 될 것입니다.

transform: rotate(90); (또는 아마도 270)을 사용하고 'writing-mode'명령을 건너 뛸 수 있어야합니다.