Ich verwende wkhtmltopdf (das die Webkit-Rendering-Engine verwendet), um HTML-Dateien in PDF-Dokumente zu konvertieren. Die generierten PDFs sind A4. Mit anderen Worten, sie haben feste Abmessungen und somit eine begrenzte Breite.Unerwünschter linker Rand bei der Verwendung von -webkit-transform: scale (...)
Eine der Tabellen in meinem PDF enthält Bilder, die aufwendig puzzelartig zusammengefügt sind und manchmal viel Platz beanspruchen.
Um das resultierende Puzzle in die Einschränkungen einer A4 PDF zu passen, verwende ich die CSS-Eigenschaft -webkit-transform: scale (...);
Dies skaliert das Puzzle schön, und es ist immer noch deutlich lesbar, aber aus irgendeinem Grund schiebt es auch den Tisch mit dem Puzzle nach rechts. Es scheint, einen beträchtlichen Rand zur linken der Puzzletabelle hinzuzufügen, obwohl ich seinen linken Rand ausdrücklich zu 0 setze.
Interessanterweise, je kleiner der Maßstab in meiner webkit Transformation, desto größer der Rand auf der linken Seite. Wenn ich zum Beispiel die Skalierung (0,75) verwende, beträgt der resultierende linke Rand etwa 200 Pixel. Wenn ich Skalierung (0,5) verwende, beträgt der resultierende linke Rand etwa 400 Pixel.
Ich habe versucht, die Puzzle-Tabelle auf der linken Seite mit absoluten, festen und relativen Positionierung mit Links: 0 ausrichten. Ich habe auch versucht, es nach links schweben, sowie in einem Container mit Text-Align nach links setzen. Keine dieser Techniken funktioniert.
Irgendwelche Ideen, woher dieser linke Rand kommt und wie ich ihn entfernen/umgehen kann?
Für Crossbrowser-Unterstützung: 'Transform-Herkunft: 0 50%' mit '-ms' und' -webkit' Präfixe. [Quelle] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) –
@ Richard-dW's Lösung funktioniert auch in FireFox, die ursprüngliche nicht. Vielleicht möchten Sie dies als Antwort hinzufügen – patrick