HTML-Element skalieren mit transform: scale()

[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