1

html を動的に作成し、それ自体を iframe として jquery に挿入して、改ページのある印刷ウィンドウを開こうとしています。

ID のリストを含むセッション変数を受け取りました。それぞれにブロックを作成したい：

<div class="card">
    <div class="top-center">
        <div class="first-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
    </div>
    <div class="bottom-center">
        <div class="first-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
    </div>
</div>

私が使用している JQuery プラグインはhttp://www.position-absolute.com/creation/print/です。

やりたいこと：テキストを90°回転させます

*
{
    margin: 0px;
    padding: 0px
}
.card { 
    -webkit-transform: rotate(90deg);
    page-break-after:always;
    /* this is taken from w3schools*/
    margin-left:auto;
    margin-right:auto;
    width: 70%;
}

これを横向きのページとして見ることができると思います。必要な90°頭を傾けると、各ページの短辺で折りたたむので、上部中央が左側、下部中央が右側になります。 .

各 div の下部/上部は、垂直方向と水平方向の両方で回転した後、ページの中央で死んでいるはずです。

前述のページ設定を css で取得するにはどうすればよいですか

次のようになります: http://goo.gl/lNP8J

4

1 に答える 1

7

コンテンツを回転するには、最初に、transform-origin回転の中心として使用するポイントを設定する必要があります。回転した要素に px または em で固定幅を指定する必要がある場合もあります (% で幅を指定して試したところ、うまく機能しなかったようです)。また、さまざまなブラウザーをサポートするためtransformに、すべての範囲のセレクター プレフィックスを使用してください。transform-origin

次の行に沿ったもの：

-webkit-transform-origin: 0 0;
-moz-transform-origin:    0 0;
-ms-transform-origin:     0 0;
transform-origin:         0 0;

-webkit-transform: rotate(90deg);
-moz-transform:    rotate(90deg);
-ms-transform:     rotate(90deg);
transform:         rotate(90deg);

編集：

これは、少し近づくかもしれない簡略化されたバージョンです。次の CSS では、コンテンツの固定幅 (この場合は 400px) を設定し、回転したコンテンツの上下のスペースを 100px に強制しています。この例では、コンテンツを中央に配置しようとはしていませんが、配置は CSS を編集することで調整できます (より中央に表示されるようにします)。これは複数ページの印刷には対応していませんが (特に、回転したコンテンツをどのように処理するか)、正しい方向への一歩になることを願っています:

.card {
    width: 400px;
    background-color: #eee;  /* Temporary bg color, for testing */

    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    transform-origin:         0 0;

    -webkit-transform: translate(100px, 500px) rotate(-90deg);
    -moz-transform:    translate(100px, 500px) rotate(-90deg);
    -ms-transform:     translate(100px, 500px) rotate(-90deg);
    transform:         translate(100px, 500px) rotate(-90deg);
}

これがjsfiddle demoです。変換機能で500pxは400px、 は幅に100px上部の間隔を加えたものです。必要に応じて幅とtranslate()値を調整して、試してみてください。

コンテンツの幅または高さのいずれかに % を使用しないようにする必要がある場合があります (または、少なくとも、そうしないことができれば、はるかに簡単になる可能性があります)。

于 2012-07-02T14:30:35.323 に答える