인쇄 미리보기 squishing 콘텐츠

Question

CSS로 @page 지시문을 사용하는 방식으로 인쇄 미리보기를 인쇄하려고합니다. 웬일인지, 나의 페이지 마진이 무엇으로 설정되었는지에 관계없이, 그 숫자가 아마도 정확하다고해도 내용은 찌그러진다. 여기 테스트 예는 다음과 같습니다

이 페이지 (I 크롬에서 테스트하고 있습니다)에 인쇄 미리보기를 열면

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

, 당신은 카드 오프 센터 격렬 것을 볼 수 있습니다. 여기에 문제가 있습니다 - 내 카드는 3.5in로 2.5in로 설정되고 페이지 자체는 8.5in로 11in으로 설정됩니다. 즉, 왼쪽과 오른쪽 사이에 대략 1in의 여백을두고 위쪽과 아래쪽에 0.5in 여백을 가져야한다는 것을 의미합니다. 논리적으로 마진은 각면에 대해 반으로 줄여야합니다. 나는 실제로 그렇게 할 경우, 그것은 찌그러 보이는이와 내가 수동으로 여백을 설정하려고하면

가

@media print { 
    html, body, .printable, .results-pane, .embed-view { 
     width: 8.5in !important; 
     height: 11in !important; 
    } 

    @page { 
     size: 8.5in 11in; 
     margin-top: 0.25in; 
     margin-left: 0.5in; 
     margin-right: 0.5in; 
     margin-bottom: 0.25in; 
    } 
    } 

문제도 존재하고 :

여기 내 @page의 CSS입니다 내 콘텐츠가 찌그러지고있는 것을 볼 수 있습니다. 여기가 전혀 마진 (사용할 수있는 1 인치와 0.5in 여백을 남겨으로 보이는 방법은 다음과 같습니다

을 그리고 여기에 내가 여백에게 자신을 설정할 때 보이는 방법은 다음과 같습니다

인가가 방법 중 하나를이 squishing 동작을 수행 할 브라우저에서 못하게 할 수 또는 내 @print 쿼리를 사용하여이를 수정? 참고로, 본문 자체에 여백을 설정했는데 위쪽/아래쪽 여백을 여러 페이지 인쇄.

Answer 1

운에는 그것이 있기 때문에,이 실제로 최초의 미디어 쿼리에 문제가 이러한 모든되기 때문에

html, body, .printable, .results-pane, .embed-view { 
    width: 8.5in !important; 
    height: 11in !important; 
} 

같은 크기로 설정하면, 그들은 서로 밀어 낸다. 해결책은 단지 html을 올바른 너비/높이로 만들고 모든 것을 모든 곳에서 떨어 뜨리는 것이 었습니다.

Answer 2

초과 된 대괄호가 CSS를 위반할 가능성이 있습니까?

@page { 
    size: 8.5in 11in; 
    margin-top: 0.25in; 
    margin-left: 0.5in; 
    margin-right: 0.5in; 
    margin-bottom: 0.25in; 
} 

}/* < - 별도의 브라켓 */