HTML-Element skalieren mit transform: scale()

[Meisterlein]

Hallo,

ich habe ein bisschen mit CSS bzw. transform: scale() herumprobiert und versucht, einzelne Textzeilen zu skalieren bzw. zu verzerren. Das funktioniert an sich auch. Doch die Elemente wandern dabei, je nach Wert, nach links oder rechts, was ja wegen der Skalierung nachvollziehbar ist.

<p style="border:1px solid red;font-size:20pt;transform: scale(0.8,1);">Diese Zeile soll schmaler skaliert sein.</p>
<p style="border:1px solid red;font-size:20pt;transform: scale(1.5,1);">Diese Zeile soll breiter skaliert sein.</p>
<p style="border:1px solid red;font-size:20pt;">Diese Zeile ist nicht skaliert.</p>Quelltext hier

Ich hätte nun gerne weiterhin die Absätze linksbündig, so wie die dritte Zeile. Hat jemand eine Idee? Danke! Meisterlein

[Matthias Apsel]

Hallo Meisterlein,

Möglicherweise suchst du font-stretch, letter-spacing oder word-spacing.

Bis demnächst
Matthias

[Meisterlein]

Nein, font-stretch funktioniert da nicht, zumindest nicht auf diese Weise. Dafür muss der Font selbst die entsprechenden Voraussetzungen bieten, um z.B. font-stretch: ultra-condensed umzusetzen. Die anderen Angaben sind für Wortzwischenraum und Buchstabenzwischenraum, skalieren geht damit nicht.

[Rolf B]

Hallo Meisterlein,

ein paar Tipps:

Sicherlich ist das nur eine Spielerei, aber möglicherweise sind das generelle Irrtümer deinerseits.

Fonts spezifiziert man dann und nur dann in pt (1/72 Zoll), wenn man Material in die Druckerei gibt. Im Browser empfiehlt sich immer die Angabe von Schriftgrößen und Längenangaben in Bezug auf die Default-Schriftart des Browsers. Dadurch skaliert die Webseite automatisch mit der vom Benutzer eingestellten Schriftgröße. Die Einheit dafür heißt em. Wenn die Standardschriftgröße 16px ist, dann ist 1em = 16px.

Inhalte gehören ins HTML, Layout ins CSS. D.h. es wäre besser, im head-Bereich der Testseite ein <style> Element unterzubringen und dort hineinzuschreiben:

<style>
p {
   font-size: 2em;
   border: 1px solid red;
   transform-origin: left 50%;
}
</style>

Letzteres löst übrigens dein Problem 😉

Aus den style-Angaben im HTML kannst Du die Angaben für font-size und border damit entfernen. Den transform kannst Du zum Spielen da lassen, aber für eine Produktionswebseite sollte man überlegen, welche Art von Inhalt man transformieren will, und diesen Arten von Inhalt im HTML eine Klasse zuweisen. Im CSS gibt man dann an, dass man Elemente dieser Klasse strecken oder stauchen möchte.

Du musst aber auch beachten, dass scale zwar das Element verändert, aber nicht die Boxgröße, mit der der Browser Platz dafür reserviert. Deswegen ragt dein breiter gemachtes p aus dem Bildschirm hinaus. Sobald der Text länger wird, wirst Du das Folgeproblem haben, wie man den überhängenden Teil lesbar macht, und dann vielleicht nach padding-right suchen. Das ist dann ungeschickt. Du wirfst ein zweites Medikament ein, um die Nebenwirkung des ersten zu bekämpfen.

Es ist allerdings auch nicht einfach, das anders zu machen. Um die Schrift zu verbreitern, ohne die Höhe zu ändern, schlug Matthias andere Eigenschaften vor.

font-stretch funktioniert nur, wenn der Font das unterstützt. Auf meinem Windows PC passierte da nur bei ein paar Fonts ein bisschen. Auf "schmaler" reagierten ein paar Fonts, auf "breiter" nur einer (und bei all dem Probieren hab ich vergessen, welcher das war 🤣. Aber 200% waren da auch noch keine Verdoppelung.

letter-spacing schafft Luft zwischen den Buchstaben. Aber ändert die Buchstaben nicht. Ähnliches gilt für word-spacing.

Für font-stretch wirst Du also erstmal einen passenden Webfont finden müssen. Ansonsten hilft wohl tatsächlich nur die Kombi von Teufel (scale) und Beelzebub (padding-right). Aber vielleicht hat ja jemand anderes noch einen besseren Tipp.

Rolf

[Meisterlein]

Danke Rolf. Natürlich hast du Recht mit den Angaben in pt, ebenso mit deinem Hinweisen zu CSS-Klassen bzw. Platzierung des CSS-Codes. Das sollte nur kleines Beispiel sein, es ist kein Ausschnitt aus einer veröffentlichten Seite. Eigentlich geht es auch gar nicht direkt um eine Webseite. Ich möchte HTML/CSS verwenden, um per Bash-Script daraus ein PDF zu generieren. Was ziemlich gut funktioniert. Bestimmte Zeilen darin sollen eben kürzer oder weiter skaliert werden. In etwa so, wie man das in DTP-Programme kann. Mal sehen, vielleicht hat jemand eine Idee...

[Meisterlein]

Das mit transform-origin: sieht gut aus! Das könnte zumindest für diesen Zweck hilfreich sein. Interessant ist da nur das optische Ergebnis, weil umgewandelt in PDF.

Meisterlein

[Rolf B]

Hallo Meisterlein,

je nachdem, welches Tool Du da verwendest, könntest Du sogar auf inline-Styles angewiesen sein.

Ein PDF ist nicht responsiv, da könnte auch etwas Hantieren mit padding (oder width) akzeptabel sein, um ein p Element mit Zeilenumbrüchen drin strecken zu können.

Rolf