Safari aus der Balance

[Gunnar Bittersmann]

Eine Überschrift besteht aus zwei Teilen, zwischen denen ein visuell verstecker Trenner ist. Dadurch (insb. dessen position: absolute) kriegt Safari text-wrap: balance nicht auf die Reihe: Codepen (In Firefox und Chromia sieht’s so aus wie’s soll.)

Hat jemand eine Idee, wie man Safari auch dazu bringen könnte?

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

da hast Du mich erstmal verwirrt, weil ich nur das text-wrap:balance beim h1 gesehen habe und mich wunderte, warum nichts passierte, als ich das rauslöschte (ich kannte die Eigenschaft nicht und wollte ihren Effekt sehen).

Wenn position:absolute das Problem ist, dann lass es weg und mach es so:

<h1>
<b>Star Trek: Strange New Worlds<span class="visually-hidden">:</span></b>
<span>Tomorrow and Tomorrow and Tomorrow</span>
</h1>

.visually-hidden {
   ...
   /* position:absolute; */
   display: inline-block;
   ...

Der display:inline-block im visually-hidden ist nötig, damit width und height akzeptiert werden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

da hast Du mich erstmal verwirrt, weil ich nur das text-wrap:balance beim h1 gesehen habe und mich wunderte, warum nichts passierte, als ich das rauslöschte

Sorry, das sollte da gar nicht stehen; einmal beim Container reicht ja. Ich hatte rumprobiert, ob’s vielleicht was bewirkt, und dann vergessen, es wieder wegzumachen.

Wenn position:absolute das Problem ist, dann lass es weg und mach es so:

.visually-hidden {
   ...
   /* position:absolute; */
   display: inline-block;
   ...

Danke, gute Idee.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

mach es so:

.visually-hidden {
   ...
   /* position:absolute; */
   display: inline-block;
   ...

Danke, gute Idee.

Aber so ganz gut ist die Idee, die Stile der Helferklasse zu ändern, dann doch nicht. Besser so lassen und nur dort zu überschreiben, wo es notwendig ist, d.h. dort, wo text-wrap: balance gesetzt wird. Im Codepen geändert:

.top {
	text-align: center;
	text-wrap: balance;
	
	.visually-hidden {
		position: revert;
		display: inline-block;	
	}
}

Kwakoni Yiquan