답변:
CSS에서 아래와 같이 @page 속성을 설정할 수 있습니다.
@media print{@page {size: landscape}}@page는의 일부 CSS 2.1 사양 그러나이 size같은 질문에 대한 답변으로 강조 표시되지 않은 {: 가로 크기} 사용되지 않습니다 @Page? :
CSS 2.1은 더 이상 크기 속성을 지정하지 않습니다. CSS3 Paged Media 모듈의 현재 작업 초안에서이를 지정합니다 (그러나 이것은 표준이 아니거나 수용되지 않습니다).
명시된 바와 같이 size 옵션은 CSS 3 Draft Specification 에서 나온 것 입니다. 이론적으로는 샘플 크기는 생략되었지만 페이지 크기와 방향으로 설정할 수 있습니다.
지원은 firefox에 제출 된 버그 보고서 시작 과 매우 혼합되어 있으며 대부분의 브라우저는이를 지원하지 않습니다.
IE7에서는 작동하는 것처럼 보이지만 IE7은 인쇄 미리보기에서 사용자가 마지막으로 선택한 가로 또는 세로를 기억하기 때문입니다 (브라우저 만 다시 시작됨).
이 기사 에서는 이상적이지 않고 브라우저 보안 설정을 변경하는 데 의존하지만 JavaScript 또는 ActiveX를 사용하여 사용자 브라우저에 키를 보내는 해결 방법을 제안했습니다.
또는 페이지 방향이 아닌 내용을 회전시킬 수 있습니다. 스타일을 만들어이 두 선이 포함 된 바디에 적용하면이 작업을 수행 할 수 있지만 정렬 및 레이아웃 문제가 많이 발생하는 단점도 있습니다.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>내가 찾은 마지막 대안은 PDF에서 가로 버전을 만드는 것입니다. 사용자가 인쇄를 선택하면 PDF를 인쇄 할 수 있습니다. 그러나 IE7에서 자동 인쇄 작업을 수행 할 수 없었습니다.
<link media="print" rel="Alternate" href="print.pdf">결론적으로 일부 브라우저에서는 @page size 옵션을 사용하는 것이 상대적으로 쉽지만 많은 브라우저에서는 확실한 방법이 없으며 콘텐츠와 환경에 따라 다릅니다. 인쇄를 선택하면 Google 문서에서 PDF를 만든 다음 사용자가 해당 PDF 파일을 열어 인쇄 할 수 있습니다.
@page size모든 최신 브라우저에서 작동하지는 않지만 Firefox에서만 작동합니다. 내가 본 한 크롬과 오페라는 이것을 무시합니다.
size: landscape규칙은 있지만 CSS2.1의 일부 는 아닙니다@page . 그러나 CSS3의 일부입니다. 확인을 위해 W3C CSS Validator를 사용하여 @page {size: landscape}"Profile"을 레벨 2.1과 레벨 3으로 설정 한 결과를 입력 하고 비교 하십시오.
내 해결책 :
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>이것은 작동 IE, Firefox및Chrome
classdiv가 전체 페이지가 아닌 가로 방향이되도록하려면 어떻게해야 합니까?
페이지 내용을 회전시키는 것만으로는 충분하지 않습니다. 다음은 대부분의 브라우저 (Chrome, Firefox, IE9 +)에서 작동하는 올바른 CSS입니다.
margin그렇지 않으면 페이지 여백이 인쇄 대화 상자에서 설정 한 것보다 커지기 때문에 본문 을 0으로 설정 하십시오. 또한 background페이지를 시각화 할 색상을 설정하십시오 .
body {
margin: 0;
background: #CCCCCC;
}margin, border및 background페이지를 시각화하는 데 필요합니다.
padding필요한 인쇄 여백으로 설정해야합니다. 인쇄 대화 상자에서 동일한 여백을 설정해야합니다 (이 예에서는 10mm).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}A4 페이지의 크기는 210mm x 297mm입니다. 크기에서 인쇄 여백을 빼야합니다. 그리고 페이지 내용의 크기를 설정하십시오 :
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}브라우저마다 크기가 조금씩 다르기 때문에 277mm 대신 276mm를 사용합니다. 따라서 일부는 277mm 높이의 내용을 두 페이지에 인쇄합니다. 두 번째 페이지가 비게됩니다. 276mm를 사용하는 것이 더 안전합니다.
우리는 어떤 필요가 없습니다 margin, border,을 padding, background그래서 그들을 제거, 인쇄 된 페이지에 :
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}변환의 원점은 0 0! 또한 가로 페이지의 내용은 276mm 아래로 이동해야합니다!
또한 세로 및 lanscape 페이지가 혼합되어 있으면 IE가 페이지를 축소합니다. -ms-zoom1.665 로 설정 하여 수정합니다 . 1.6666 또는 이와 유사한 것으로 설정하면 페이지 내용의 오른쪽 경계가 잘릴 수 있습니다.
당신이 IE8- 필요 또는 다른 오래된 브라우저를 사용할 수 지원하는 경우 -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). 그러나 현대의 충분한 브라우저에는 필요하지 않습니다.
테스트 페이지는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>CSS-Discuss Wiki 에서 인용
@page 규칙은 CSS2에서 CSS2.1로 범위가 축소되었습니다. CSS2 @page 규칙의 전체 규칙은 Opera에서만 구현 된 것으로 알려져 있습니다. 내 자신의 테스트에 따르면 IE와 Firefox는 @page를 전혀 지원하지 않습니다. 현재 사용되지 않는 CSS2 사양 섹션 13.2.2에 따르면 가로 방향에서 사용자의 방향 설정 (예 : 강제 인쇄)을 무시할 수 있지만 관련 "크기"속성이 CSS2.1에서 삭제되었습니다. 현재 브라우저에서 지원하지 않습니다. CSS3 Paged Media 모듈에서 복원되었지만 2009 년 7 월과 같이 Working Draft 일뿐입니다.
결론 : 현재 @page는 잊어 버리십시오. 문서를 가로 방향으로 인쇄해야한다고 생각되면 디자인을보다 유연하게 만들 수 있는지 스스로에게 물어보십시오. 실제로 문서에 열이 많은 데이터 테이블이 포함되어 있기 때문에 실제로 할 수 없다면 방향을 가로로 설정하고 가장 일반적인 브라우저에서 방향을 설정하도록 사용자에게 조언해야합니다. 물론 일부 브라우저에는 너비에 맞는 인쇄 기능 (예 : Opera, Firefox, IE7)이 있지만이 기능을 사용하거나 사용 설정 한 사용자에게 의존하는 것은 바람직하지 않습니다.
이것을 CSS를 추가하십시오 :
@page {
size: landscape;
}size속성은 언급 한 바와 같이 계신 것입니다. 인쇄 할 때 페이지의 방향과 크기를 모두 설정하려면 다음을 사용할 수 있습니다.
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}@page documentation에 대한 링크는 다음과 같습니다 .
.css파일에 저장 하거나 인라인 인 경우 기본 boostrap 선언 ( size: a3)이 우선합니다.
'size'속성을 landscape 로 설정할 수 있는 CSS 2 @page 규칙 을 사용할 수 있습니다 .
비표준 IE 전용 CSS 속성 쓰기 모드를 사용할 수도 있습니다
div.page {
writing-mode: tb-rl;
}가로 설정으로 빈 MS 문서를 만든 다음 메모장에서 열었습니다. 다음을 내 HTML 페이지에 복사하여 붙여 넣기
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>인쇄 미리보기는 페이지를 가로 크기로 표시합니다. 이것은 FF에서 테스트되지 않은 IE 및 Chrome에서 제대로 작동하는 것 같습니다.
이 문제를 한 번 해결하려고했지만 모든 연구를 통해 ActiveX 컨트롤 / 플러그인이 나왔습니다. 브라우저 (3 년 전)가 인쇄 설정 (인쇄 매수, 용지 크기)을 변경할 수 있다는 트릭은 없습니다.
브라우저 인쇄 대화 상자가 나타날 때 "가로"를 선택해야한다고 사용자에게 신중하게 경고하기 위해 노력했습니다. 또한 "인쇄 미리보기"페이지를 만들었습니다.이 페이지는 IE6보다 훨씬 좋습니다. 우리의 응용 프로그램은 일부 보고서에서 매우 광범위한 데이터 테이블을 가지고 있었고 인쇄 미리보기를 통해 테이블이 용지의 오른쪽 가장자리에서 쏟아 질 때 사용자에게 명확하게 알 수 있습니다 (IE6은 두 장의 인쇄에도 대처할 수 없었기 때문에).
그리고 그렇습니다. 사람들은 지금도 여전히 IE6을 사용하고 있습니다.
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>이 스타일을 테이블에 적용하려면이 스타일 클래스를 사용하여 하나의 div 태그를 만들고이 div 태그 내에 테이블 태그를 추가 한 다음 끝에 div 태그를 닫으십시오.
이 표는 가로로만 인쇄되며 다른 모든 페이지는 세로 모드로만 인쇄됩니다. 그러나 문제는 테이블 크기가 페이지 너비보다 크면 일부 행이 느슨해 질 수 있으며 때로는 헤더도 누락되는 것입니다. 조심해.
좋은 하루 되세요.
감사합니다, Naveen Mettapally.
Denis의 답변을 시도하고 몇 가지 문제가 발생했습니다 (가로 페이지 이후에 세로 페이지가 올바르게 인쇄되지 않음). 내 해결책은 다음과 같습니다.
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
@media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>이것은 또한 나를 위해 일했습니다 :
@media print and (orientation:landscape) { … }