3

印刷用のWebページを作成しています。2 ページに折り返すことができます。スキャナーが参照用に使用できるように、各隅に小さな黒い四角が必要です。隅にある 4 つの黒い四角形の div と、メイン コンテンツ領域用の div がもう 1 つ必要だと確信しています。4 つの角の正方形を配置して、それぞれが印刷ページの独自の角にあり、コンテンツ div が中央を埋めるようにするにはどうすればよいですか? 中央のコンテンツは、左から右に角の四角形の内側にある必要がありますが、上から下に重なる可能性があります。

編集: サンプル画像をアップロードしましたが、表示されません。

編集：これが私がこれまでに持っているものです：

http://jsfiddle.net/7DjTf/

<html>
    <head>
        <title>Printable Form</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div id="UpperLeftScanningIndicator"></div>
        <div id="UpperRightScanningIndicator"></div>
        <div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
        <div id="LowerLeftScanningIndicator"></div>
        <div id="LowerRightScanningIndicator"></div>
    </body>
</html>

#Content {
    border: solid 1px black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

#UpperLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
}

#UpperRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
}

#LowerLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
    position:absolute;
    bottom:20px;
}

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:500px;
}

右下のブロックを右に移動する方法がわかりません。フロートは機能しますが、「絶対」を使用するとそれが壊れたようです。注: このサンプルを適切に表示するには、ブラウザ ウィンドウをかなり広くする必要があります。また、ページが 1 つしかない場合でも、2 ページ目が印刷されている場合でも、これらの黒い四角形をすべてのページに表示する方法がわかりません。

ページの外観のサンプルを次に示します。

4

2 に答える 2

2

実際にはかなり簡単です。私はあなたのフィドルを更新しました - http://jsfiddle.net/avrahamcool/7DjTf/1/

right属性を正しく使用する必要があります。

すべてのインジケーターに同じ手法を使用することをお勧めします。position: absolute;それらすべてで使用し、それに応じてtop/ bottom left/rightも設定します。スタイルを繰り返す必要はありません。代わりにクラスを使用してください。このように: http://jsfiddle.net/avrahamcool/7DjTf/2/

更新: 明らかに、@page CSS3 疑似要素ルールはまだブラウザーに実装されていないため、JavaScript にフォールバックする必要があります。（そうであれば、この記事で説明されているような完璧な解決策があります）

最初:background-colorが出力されないため、img タグに切り替えました。2 番目: 最初のソリューションには 4 つのインジケーター (最初に 2 つと最後に 2 つ) しかなく、印刷されたページごとに 4 つのインジケーターが必要です。

ここに新しいソリューションがあります：http://jsfiddle.net/avrahamcool/7DjTf/5/

アイデアは、コンテンツの成長に合わせて動的インジケーターを追加することです。インジケーターは、印刷時にのみ表示される必要があります。インジケーターを視覚化する部分が.indicatorルールであり、彼は @print ルールにあります。

これまでのところ、印刷されるページ数を「知る」コードを書くことができませんでした..そのため、forループは一定回数実行されます（この部分を解決する方法がわかりません）

ループ内: 毎回 4 つの動的インジケーター (左に 2 つ、右に 2 つ) を追加します。オフセットは、次のインジケーターが次のページにあるように大きくなります。

作成するページ数がわかっている場合は、完璧なソリューションです。

注意: このページ間のオフセットは、異なるブラウザから印刷すると異なります。Chrome でソリューションをテストしました。(IE & FF は少し調整が必要です);

于 2013-09-09T18:17:12.733 に答える