페이징 된 미디어 요소의 스타일 지정

Question

google이나 @ 페이지 documentation 또는 this link에 대한 정보가 없습니다. 이 행복하게 Page A of X 인쇄

@page { 
    @bottom-right { 
    content: "Page " counter(page) " of " counter(pages); 
    } 
} 

:

는 내가 HTML에서 생성 PDF 파일의 페이지의 오른쪽에 바닥 글에 페이지 번호를 표시하는 다음과 같은 코드가 있습니다. A와 X를 어떻게 스타일링합니까?

Answer 1

간단한 대답은 CSS 만 사용할 수 없다는 것입니다. 텍스트의 나머지 부분에서 별도로 스타일 A 및 X하기 위해, 당신은 같은 A 및 X 포장 요소를 삽입해야합니다 따라서 이러한 목표를 달성하기 위하여 그러나

Page <span class="a">A</span> of <span class="b">B</span> 

, 당신 cannot insert tags using the CSS content tag.을, 당신은 바닥 글을 작성해야 요소 (as described here)를 HTML로 변환 한 다음 그에 맞게 스타일을 지정하십시오. 예 :

<div class="footer"> 
    Page <span class="a">A</span> of <span class="b">B</span> 
</div> 


@media screen { 
    div.footer { 
    display: none; 
    } 
} 

@media print { 
    div.footer { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    padding-right: 30px; 
    } 

    div.footer a{ 
    // STYLING FOR A GOES HERE 
    } 
}