„Schnittkantenproblem“ bei gekachelter Hintergrundgrafik mit quergestellter Schrift

[Gunnar Bittersmann]

@@pixxma

Allerdings muss ich gestehen, dass ich den Neigungswinkel und die Größenverhältnisse halbwegs unreflektiert von Dir übernommen habe. Will sagen: ich habe versucht, es zu verstehen, aber meine vor Lichtjahren guten bis sehr guten Schulmathematik-Kenntnisse konnte ich nicht mehr so weit reaktivieren, um das wirklich in Gänze zu verstehen. - Also falls Du das noch lesen solltest und Zeit und Lust hättest, das Verhältnis zwischen Neigungswinkel, Bildgröße und Bildpositionen bzw. -abständen noch einmal kurz zu erläutern, würde ich mich echt freuen.

Hm, ich hatte gehofft, das wäre klargeworden. OK, nochmal. Gehen wir jetzt mal vom Neigungswinkel aus. Wir machen es steiler, sagen wir 20°. Wir ändern im Fork im SVG auf rotate(-20).

Damit ich die Änderungen nicht alle dreimal machen muss, hab ich die Data-URL (vorerst nicht prozent-codiert) in eine custom property gepackt; also mit einem Browser ankucken, der das kann.

Wir berechnen tan 20° ≈ 0.36397, was so ziemlich genau 99/272 entspricht. Das heißt: wenn du von einem Punkt der gedachten Grundlinie der Schrift 272 Einheiten (z.B. Pixel) nach rechts und 99 Einheiten nach oben gehst, landest du wieder auf dieser Linie.

Die Proportionen des SVG weden entsprechend angepasst: aber nicht viewBox="0 0 272 99", sondern wir wollen ja etwas Luft, also in y-Richtung das Dopplte veranschlagen: viewBox="0 0 272 198". (Man könnte auch einen anderen Wert nehmen, dann müsste man aber anders weiterrechnen.)

Mit dem geänderten Koordinatensystem müssen nun auch Schriftgröße und vertikale Position vergrößert werden, bspw. y="70" und font-size="30".

Als dargestellte Größe der Textgrafik wählen wir dieselben Proprtionen wie für viewBox, bspw. Breite und Höhe jeweils durch 20 geteilt: background-size: 13.6em 9.9em.

Jetzt ein bisschen Rechnerei: wir brauchen ⅔ von 13.6em, macht übern Daumen 9.067em. Wenn wir 9.067 Einheiten nach rechts gehen, wieviel geht’s nach oben, um auf der Linie zu bleiben? Na 9.067 · 99/272 ≈ 3.3 Also ist background-position für die zweite der identischen Grafiken 9.067em -3.3em. Für die dritte könnet ich wie vorher mal 2 rechnen; mal −1 tut’s aber auch: background-position: 0 0, 9.067em -3.3em, -9.067em 3.3em.

(Warum das mit den ⅔ und −⅔ klappt, machst du dir am besten anhand der unterschiedlich eingefärbten Grafiken klar.)

Der Richtigkeit halber zum Schluss die Data-URL wieder prozent-codiert, wenngleich es vermutlich dieselben Browser sind, die den SVG-Hintergrund auch so darstellen würden, die auch custom properties verstehen.

LLAP 🖖