Inline-Element mit CSS transform: scaleX() stauchen?

[Marika]

Hallo zusammen,

ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Beispiel-Schnipsel mit dem p-Tag steht dieses innerhalb eines span-Tags. Da transform normalerweise ja nicht mit Inline-Elementen funktioniert, habe ich display: inline-block verwendet. Das funktioniert eigentlich auch. Das Wort "Beispieltext" wird gestaucht, das nächste Wort folgt aber nicht direkt als Fließtext darauf. Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Der blaue Rahmen - als Test - hingegen umrahmt sehr wohl "Beispieltext".

<p>
In diesem kurzem <span>Beispieltext</span> soll ein einzelnes Wort gestaucht werden.
</p>

span {
  display: inline-block;
  border: 1px solid blue;
  transform: scaleX(0.75);
  transform-origin: left;

Vielleicht kann mir da jemand weiterhelfen?

Danke schön Marika

[Tabellenkalk]

Hallo,

ich möchte in einem Text ein einzelnes Wort stauchen,

Du suchst also eigentlich die Laufweite: font-stretch

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

den kannte ich nicht. Wie interagiert das mit letter-spacing?

Rolf

[Tabellenkalk]

Hallo,

den kannte ich nicht.

Ich bisher auch nicht. Und hier auf dem Handy wirkts auch nicht?!

Wie interagiert das mit letter-spacing?

Öh. Interagierts überhaupt?

Gruß
Kalk

[Der Martin]

Hallo,

den kannte ich nicht. Wie interagiert das mit letter-spacing?

mal nur so aus dem Bauch heraus: Die ergänzen sich prima.
Während font-stretch die Glyphen des Fonts an sich staucht oder streckt, verändert letter-spacing den Abstand zwischen den Zeichen, ändert aber nichts an den Proportionen der Zeichen selbst.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Tabellenkalk

Du suchst also eigentlich die Laufweite: font-stretch

Das funktioniert aber nur mit Fonts mit verschiedenen Laufweiten als Schriftschnitte. Die Auswahl dürfte da überschaubar sein: Variable fonts mit width-Achse. Ansonsten fällt mir nur League Gothic ein:

😷 LLAP

[Marika]

Danke... aber letter-spacing ist für meinen Zweck eher ungeeignet. Und font-stretch benötigt eben entsprechende Fonts.

Marika

[Rolf B]

Hallo Marika,

das ist bei CSS Transformationen so: die Darstellung der Box wird verändert aber der dafür reservierte Platz nicht.

Vielleicht kannst du deine Absicht mit der Eigenschaft letter-spacing umsetzen? Ein negativer Wert schiebt die Buchstaben zusammen. Das geht auch mit inline Elementen. Alternativ kannst du auch versuchen, einen Font zu finden den es "normal" und "schmal" gibt; allerdings gibt es keine Garantie, dass diese Schriftschnitte beim Benutzer deiner Seite auch verfügbar sind.

Aber, was ist der Zweck, den du verfolgst? Wozu muss man ein Wort in der Zeile stauchen? Sowas macht man eigentlich im Drucksatz, wenn eine Silbentrennung unpraktikabel ist. Eine Webseite ist aber kein Druckstück. Je nach Displaygröße und Einstellungen des Benutzers hast du auf einer responsiven Seite ganz andere Positionen für den Umbruch. Da sind CSS Eigenschaften für Silbentrennung oder ­ Einfügungen für bedingte Trennstriche eventuell sinnvoller.

Rolf

[Rolf B]

Hallo Marika,

eins fällt mir noch ein. Du könntest auf die Idee kommen, den leeren Raum, den scaleX hinterlässt, mit einem negativen margin auszugleichen.

Das kann man auf dem eigenen Gerät hinbiegen. Aber du biegst für jedes Wort individuell, und es ist völlig ungewiss, wie es bei anderen Leuten aussieht. Deswegen wäre das keine gute Idee.

Rolf

[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

[Marika]

Besten Dank Gunnar, für deine mitternächtliche Hilfestellung! Grundsätzlich hast du natürlich recht, Schriften so zu stauchen ist nicht unbedingt ein guter Weg. Sollte auch nur für einzelne Worte in einem Header-Text dienen, aus einem bestimmten Grund.

Dein Bespiel auf Codepen ist super für meinen Zweck, danke. Funktioniert wunderbar, habe die Werte entsprechend angepasst.

Marika