3

スキャンしたドキュメントの上にテキストを配置するCSSルールを作成しようとしています。

理由：ドキュメントは事前に印刷されたフォームです。実際のフォームの「スペース」に関連するように、テキストを画面上に配置しようとしています。

問題：センチメートルを使用して値を配置していますが、実際のページの値と一致していないようです。スキャンした画像がページの背景にあるため、このずれがわかります。

私が試したこと：

  1. 定規を使用して場所を物理的に測定し、CSSで指定しました。しかし、画面上では、それは集計されません。

  2. スキャンした画像を使用してCSS値を配置しました。次に、印刷出力が正しくありません。

  3. Inkscapeを使用してスキャンしたページをセンチメートル単位の正確な寸法に拡大縮小し、すべての余白などを考慮に入れました...

必要なもの：出力値を画面に正しく表示し、それらを正しい方法で印刷するようにしています。2枚のCSSシート（1枚は印刷用）を使用することはオプションであることを私は知っています。しかし、私は実際の印刷が行われる場所から離れてこのプログラムを開発しています。それで、正確な画面の位置を実際の/最終的なプリンアウトの位置と一致させる便利な方法はありますか？

ありがとう！

4

5 に答える 5

1

スキャンしたドキュメントは他の画像と同じです。背景として使用し、その上に要素を絶対に配置します。すべての測定は、センチメートルではなくピクセルで行います。

于 2012-06-01T14:23:53.157 に答える
1

あなたが言うようにあなたがあなたの近くにプリンターを持っていなくても、あなたは印刷のために特定のCSSスタイルシートを作成する必要があるでしょう。この方法で行う必要があります...画面で何度測定しても、プリンターの印刷は異なります。必要なCSSですが、実際には、取得して理解する必要があるのはプリンターの内部構成です。

あなたはこのチュートリアルを読むべきです、私はそれが役に立つと思いました！ マガジンを壊して印刷スタイルシートを設定する方法。

しかし、それだけでは十分ではありません...あなたは本当にプリンターについて可能なすべての詳細を尋ねる必要があります！手元にあるプリンターのモデルで、実際に印刷する人が知らない場合は、印刷時のデフォルトの余白を探すことができます。実際にそれらを知っている必要があります。指示がない場合、または見つからない場合は、プリンターに内部構成を印刷するように指示する方法が必要です。印刷する必要のあるモデルでこれを行うには、いくつかのボタンを数秒の順序で押す必要がありました。あなたのように、私はそれを私のそばに持っていません。

私はこれを一度行ったのですが、その情報を印刷しなければならないまで苦労していました。プリンターはすべてを知っていました！それはマージン、測定値、左から右、右から左などに考慮されたピクセルの量です。必要なのはそこにあり、CSSをこのプロバイダーによって動かせない値に適合させてフォーマットを完璧に印刷するためにそれを知る必要があります。

個人的な推奨事項として、TwitterでSmashing Magazineをフォローする必要があります=）WebデザインとCSSに関する彼らのツイートは非常に興味深いと思います=）

幸運を！=）

于 2012-06-08T15:22:21.493 に答える
0

JSとのコーディネートが使えると思います。

  1. 設計ソフトウェア（ペイントがツールになる場合があります）を使用して、配置する必要のある各要素の座標を取得します
  2. JSを使用して、使用している座標で要素を配置します

それは仕事をすることができ、座標は測定よりも優れています。

于 2012-06-01T14:27:16.800 に答える
0

これは理想的な解決策ではありませんが、画面上の正しい位置を取得するのに役立つかもしれないと思いました。

フォームの上に動的テストグリッドを作成して、位置がどこにあるかがわかるようにします。

これに似ています：

for($i = 0; $i < 500px; $i++)
{
      for($j = 0; $j < 500px; $j++)
      {
         echo '<span class="gridPoint" style="position:absolute; top:'.$i.'; left:'.$j.'">' . $i . ',' . $j .'</span>';
      }
}

これにより、正確な座標を確認できます。テキストは非常に小さくする必要がありますが、作業がはるかに楽になります。

于 2012-06-01T14:33:54.577 に答える
0

開始する前に、スキャンした画像を固定の幅と高さ（ピクセル単位）でスケーリングします。次に、ピクセルを使用して単語をオーバーレイします。そうすれば、両方ともピクセルであるため、印刷するときに整列するはずです。テキストサイズと行の高さもピクセル単位で指定する必要があります。

それが機能しない場合は、それがどのように機能しないかを正確に確認する必要があります。テキストの行は正しいですが、すべてが特定のピクセル数だけ上下にシフトしていますか？次に、それはおそらく行の高さの問題です。テキストは行ごとに正しく並んでいますが、行が進むにつれて単語が同期しなくなりますか？おそらく、文字と単語の間隔が異なることに関係しています。等。

于 2012-06-08T00:31:27.843 に答える