web-dev-qa-db-ja.com

HTMLを横向きに印刷する方法は？

この質問は尋ねられ、答えられましたが、大きく賛成された受け入れられた答えの両方：

  • それを行う方法を説明していません
  • 動作しません

もちろんその理由は、受け入れられた答えが1 廃止されました2。また、W3Cには標準的な代替品はありません。私は実際にやらなければならないことがあるので、問題が残ります。

横向きでコンテンツを印刷するようにブラウザに指示する方法は？

機能しない例

私が見つけたチューインガムのすべてのスニペットを含む例を一緒に投げました。

<!DOCTYPE html>
<HEAD>
<STYLE type="text/css">

/* https://stackoverflow.com/a/1392794/12597 */
@page
{
size: landscape;
}

/* http://www.devx.com/tips/Tip/32962 */
@media print{
@page {
        size: landscape
}
}

/* https://stackoverflow.com/a/16655216/12597 */
@media print{
.class-name{
    @page{
        size:landscape;
    }
}
}
</STYLE>

<!--https://stackoverflow.com/a/13684191/12597 -->
<STYLE type="text/css" media="print">
  @page { size: landscape; }
</STYLE>

</HEAD>

<BODY>
Hello, landscape.
</BODY>

</HTML>

誰かがうまくいくものを思いつくことができますか？

Chrome、IE11、またはEdgeを想定しています。

バックグラウンド

もちろん、これを行う理由は、横向きに印刷する必要があるためです。私の特定のケースでは、HTMLで利用可能な豊富なマークアップサービスとレイアウトサービスを使用して、8.5x11インチの3つ穴のある紙に印刷します。

enter image description here

テキスト、画像、レイアウトをページ上で水平にする必要があることを除いて、ストリップを垂直に下に移動したいと思います。

enter image description here

ボーナスリーディング

htmlprintinglandscape
7
Ian Boyd

ハックの種類と私はCHrome ... に触発されてのみテストしたHTMLを印刷するためのさまざまなページの向き

上記のコメントで述べたように、1ページのソリューションの場合、これはおそらくうまくいくでしょう。いくつかのサイズなどを調整することができます。

<html>

<head>
  <style type="text/css">
    h3 {
      text-align: center;
    }
    .receipt {
      height: 8.5in;
      width: 33%;
      float: left;
      border: 1px solid black;
    }
    .output {
      height;
      8.5in;
      width: 11in;
      border: 1px solid red;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media print {
      .output {
        -ms-transform: rotate(270deg);
        /* IE 9 */
        -webkit-transform: rotate(270deg);
        /* Chrome, Safari, Opera */
        transform: rotate(270deg);
        top: 1.5in;
        left: -1in;
      }
    }
  </style>

</head>

<body>
  <div class="output">
    <div class="receipt">
      <h3>Cashier</h3>
    </div>
    <div class="receipt">
      <h3>Customer</h3>
    </div>
    <div class="receipt">
      <h3>File</h3>
    </div>
  </div>
</body>

</html>

enter image description here

3
Kevin Brown

横向きビューの印刷用に最適化されたアプリケーションからの出力をプリフォーマットすることは歓迎されますが、記述した方法でマークアップ言語が周辺ハードウェアを制御できるようにするソフトウェアの実装はおそらく見られません。これは、プリンターの「ドライバー」が「ring-0」（x86アーキテクチャーのカーネル）に近いため、そうすることは潜在的に危険である可能性があるためです。

（セキュリティの観点から）唯一の安全な解決策は、印刷ダイアログで横長の設定を使用して印刷するようにユーザーに指示を出すことです。 CSSを使用して、そのように最適化された出力の縦向きのビューを作成できます（つまり、適合しない列を「非表示」にします。長いデータアイテムを「...」にして、それらを絞り込み、適合させるなどします。 ）;ただし、非常に目立つ「警告：横向きの表示が必要です。印刷するときに横向きを選択してください」というメッセージが表示されます。しかし、それは技術的な問題よりもUI/UXの問題です。

0
unrivaledcreations