18

私はwkhtmltopdf(Webkitレンダリングエンジンを使用)を使用してHTMLファイルをPDFドキュメントに変換しています。生成されるPDFはA4です。言い換えれば、それらは固定された寸法を持っているので、幅が制限されています。

私のPDFの表の1つには、パズルのように複雑につなぎ合わされた画像が含まれており、多くのスペースを占めることがあります。

結果のパズルをA4PDFの制約に合わせるために、CSSプロパティ-webkit-transform:scale(...);を適用しています。

これにより、パズルが美しく拡大縮小され、それでもはっきりと判読できますが、何らかの理由で、パズルを含むテーブルが右に押し出されます。左マージンを明示的に0に設定しているにもかかわらず、パズルテーブルの左側にかなりのマージンが追加されているようです。

興味深いことに、Webkitトランスフォーメーションのスケールが小さいほど、左側のマージンが大きくなります。したがって、たとえば、scale(0.75)を使用すると、結果の左マージンは約200ピクセルになります。scale(0.5)を使用すると、結果の左マージンは約400ピクセルになります。

パズルテーブルを左に絶対、固定、相対位置を使用して左に揃えてみました:0。また、左に浮かせたり、text-alignを左に設定したコンテナに貼り付けたりしてみました。これらの手法はどれも機能しません。

この左マージンがどこから来ているのか、そしてそれを削除/回避する方法はありますか?

4

1 に答える 1

36

少し試行錯誤した後、次の CSS コードをパズル テーブルに追加するとうまくいきました。

-webkit-transform-origin-x: 0;

このプロパティの詳細については、こちらをご覧ください: http://css-infos.net/property/-webkit-transform-origin-x

更新: クロスブラウザーのサポートについては、以下の Richar-dW のコメントを参照してください。

于 2012-10-23T13:18:02.370 に答える