1

私はゴルフスコアカードジェネレーターを持っています。構造的に、ページには 1072px 幅のテーブルをラップするクラス .printarea の div があります。

私は徐々にそれを手に入れてきたので、印刷するとすべての主要なブラウザーで横向きの単一ページが表示されます。

Firefox では、回転とスケールが BODY で指定されている場合、スケールは機能しません。そこで、ローテーションを他のすべてを含む DIV に移動しました。これにより回転が実現されましたが、テーブルがオフセットされたため、右側 (テーブルの下部) と上部 (テーブルの右側) でトリミングが発生しました。

余白と絶対配置を使用してこれを修正しようとしましたが、これにより、テーブルの小さな断片が 2 ページ目に分断されてしまいました。縮尺をごくわずかに縮小しても、2 ページ目の配置は解決されません。

原点設定で遊んで、最終的にposition:absolute; -moz-transform-origin: 400px 900px; は、テーブルの上部 (ページの左側) の一部が失われ、テーブルの下部 (ページの右側) が端から簡単に 3 インチ離れているにもかかわらず、最後の 2 行が移動します。紙の。比率を小さくしても、ディスプレイスメントは修正されません。

これは 1 つのカードの静的コピーです: http://egolfplan.com/example.html

投稿の最後に、印刷からの PDF のスクリーンショットを追加します。

現在の CSS

<style type="text/css" media="print">
    BODY {
        width:100%;
        height:100%;
        -webkit-transform: rotate(-90deg) scale(.68,.68); 
        -moz-transform:scale(.48,.48);
         zoom: 60%;
    }
    .printarea {
        width:100%;
        height:100%;
        -moz-transform:rotate(-90deg);
    }
    @page {margin: 0;}

 </style>

これは 68% にスケーリングされます

ここに画像の説明を入力

48% にスケーリング

ここに画像の説明を入力

-moz-transform-origin: 400px 900px;

ここに画像の説明を入力

4

4 に答える 4

1

一般に、CSSを介したローテーションは、ブラウザーの実装が異なる場合、特にブラウザー固有のプロパティを使用しているため、信頼性が低いと思います。

私は次のいずれかを行います。

  1. CSSの代わりにjQueryRotate（http://code.google.com/p/jquery-rotate/）などの堅牢なjavascriptライブラリを使用します。

  2. このスコアカードの画像を実際に生成するサーバー側のコードを記述します。この画像は、簡単に拡大縮小または回転できます。たとえば、PhPはこれを行うことができます。

  3. 縦書きのテキストが表示されないようにデザインを変更してください。

于 2011-12-13T19:36:13.727 に答える
1

Firefox は、印刷スタイルシートが適用される前に印刷用の改ページを決定しているようです。これにより、本体ブロック全体ではなく、各印刷ページにスケール変換が適用されます。

于 2012-07-09T17:20:59.610 に答える
1

特定のベンダー プロパティを使用する必要があり、レンダリングが異なるため、CSSSandpaper を使用することをお勧めします。この記事では、必要性について説明しています: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

于 2011-12-19T12:20:55.200 に答える
0

最終的に、Browshot.com を使用して各カードを JPEG スクリーンショットとしてレンダリングし、それをダウンロードとしてユーザーに送信しました。

于 2012-07-31T21:07:54.467 に答える