[解決済み】HTMLからの横書き印刷
質問
HTMLのレポートがあるのですが、列が多いので横向きに印刷する必要があります。ユーザーがドキュメントの設定を変更することなく、これを行う方法はあるのでしょうか?
また、ブラウザの種類にはどのようなものがありますか。
解決方法は?
CSSの中で、以下のように@pageプロパティを設定することができます。
@media print{@page {size: landscape}}
の一部であり、@pageは
CSS 2.1仕様
しかし、この
size
は、質問に対する回答で強調されているように
Page { size:landscape} は廃止されましたか?
:
CSS 2.1ではsize属性の指定がなくなりました。現在のワーキング CSS3 Paged Mediaモジュールのドラフトでは指定されています(ただし、これは 標準または受理されます)。
前述の通り、サイズオプションは CSS 3 ドラフト仕様 . 理論的には、ページサイズと方向の両方を設定することができますが、私のサンプルではサイズは省略されています。
と非常に混在したサポートになっています。 Firefoxでバグレポート開始 ほとんどのブラウザでサポートされていません。
IE7で動作しているように見えるかもしれませんが、これはIE7が印刷プレビューでユーザーが最後に選択した横向きか縦向きかを記憶しているからです(ブラウザを再起動した時のみ)。
この記事 JavaScriptやActiveXを使用して、ユーザーのブラウザにキーを送信する方法がいくつか提案されていますが、理想的な方法ではなく、ブラウザのセキュリティ設定の変更に依存しています。
また、ページの向きではなく、コンテンツを回転させることもできます。これは、スタイルを作成し、この2行を含む本文に適用することで可能ですが、これには多くの整列とレイアウトの問題を引き起こすという欠点があります。
<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">
結論として、一部のブラウザでは、@ページサイズオプションを使えば比較的簡単ですが、多くのブラウザでは確実な方法はなく、コンテンツや環境に依存します。 このため、Googleドキュメントでは、印刷を選択するとPDFが作成され、それを開いて印刷することができるようになっているのかもしれません。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] 背景画像を前後にパンするCSS【非公開
-
[解決済み] css画像が表示されない
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】Pandas DataFrameのより多くの列を見るために出力表示を拡大する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?