nicht angemeldet
Gunnar Bittersmann@@Marika
ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen".
Im Allgemeinen ist das keine gute Idee.
(Es sei denn, man gestaltet Albumcover. Bei Human Touch und Lucky Town dürfte es eine gestauchte Copperplate sein.)
Durch scaleX() ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikale Linien also dünner als horizontale.
Während der Effekt bei Human Touch/Lucky Town schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf.
Besser, du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit width-Achse. Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt.
Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt:
Wer League Gothic auf seinem System installiert hat, kann sich das auch im Codepen ansehen.
Ansehen kann man sich da auch die Lösung für
Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe.
Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine custom property.
Der transform-origin-Wert (magic number, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab.
Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden.
😷 LLAP
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
Tabellenkalk
Rolf B
Der Martin