„Schnittkantenproblem“ bei gekachelter Hintergrundgrafik mit quergestellter Schrift

[pixxma]

Hallo,

ich möchte eine Hintergrundgrafik dieser Art verwenden:

Es will mir einfach nicht gelingen, das Bild dergestalt zuzuschneiden, dass eine Kachelung der Hintergrundgrafik ermöglicht wird, bei der man die Schnittkanten nicht wahrnimmt und das Wort „Hinweis“ jeweils sauber fortgesetzt wird.

Was muss ich dafür beim Anlegen des Bildes berücksichtigen? (Oder hat alternativ jemand zuhause einen Bilderschriftquerstellungsgenerator rumstehen?😉)

MfG

pixxma

[at]

Hallo pixxma,

damit das funktionieren kann, müssen sich drei Werte jeweils rhythmisch wiederholen: erstens der Zeilenabstand, zweitens der Steigungswinkel und drittens der Zeileneinzug im Verhältnis zum Zeilenabstand, wobei der Zeileneinzug als solcher durch den Steigungswinkel und den Zeilenabstand definiert wird. Für letzteres ist es von Vorteil, seine Kenntnisse der Winkelfunktionen aufzufrischen. Und je einfacher der Rhythmus, desto kleiner der nötige Ausschnitt.

Beim Zeilenabstand und beim Steigungswinkel gelingt dir dieses Schema bereits mit einem monotonen Rhythmus, denn der Abstand und der Winkel sind stets gleich. Der Zeileneinzug scheint aber beliebig gewählt zu sein. Ändere das rhythmisch.

MfG, at

[pixxma]

Hallo at,

vielen Dank für Deine Antwort vom 16.8.! - Es ist plausibel, was Du schreibst, aber trotzdem will es mir nicht gelingen. Das folgende Bild z.B. erfüllt alle 3 Bedingungen:

Ich habe mit Photoshop-Ebenen herumexperimentiert, um den passenden Ausschnitt des Bildes zu finden, der bei Kachelung die Schrift fortlaufend erscheinen lässt. Leider ergebnislos.

Habe ich bei der Erstellung des Ausgangsbildes doch etwas falsch gemacht? Der Zeileneinzug einer Zeile ist immer identisch mit demjenigen der jeweils übernächsten Zeile.

MfG

pixxma

[Gunnar Bittersmann]

@@pixxma

So in etwa?

Erklärung: Ich habe 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar).

Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (silver, red, black); bei dir bekommen sie dieselbe Farbe.

Damit die Rechnung einfacher wird, hab ich als Neigungsverhältnis für die Schrift ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in transform="rotate(-14)" wiederfindet.

Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern ich habe sie doppelt so hoch gemacht; Seitenverhältnis also ½, was sich in viewBox="0 0 12 6" und background-size: 12em 6em wiederfindet.

Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: background-position: 0 0, 8em -2em, 16em -4em

[pixxma]

Hallo Gunnar,

Chapeau! Sehr geile Lösung.

Chrome macht hier leider (noch) Probleme in Version 60, siehe Screenshot untere Bildhälfte:

Aber trotzdem vielen Dank!!

MfG

pixxma

[Gunnar Bittersmann]

@@pixxma

Chrome macht hier leider (noch) Probleme in Version 60

In der 61er Beta wird’s nicht besser. Scheint aber kein WebKit-Bug zu sein (in Safari sieht’s ja gut aus), sondern ein Blink-Bug.

An der Drehung liegt’s nicht, denn auch dieser Pen ist davon betroffen. Ich weiß jetzt nicht, ob das damals niemandem aufgefallen ist oder ob der Bug erst nachträglich reinkam.

Ich weiß nicht, ob ein Kraut dagegen gewachsen ist. Weder stroke="transparent" noch stroke-width="0" noch stroke-opacity="0" hilft.

LLAP 🖖

[Gunnar Bittersmann]

@@pixxma

Chrome macht hier leider (noch) Probleme in Version 60

Du kannst dir das natürlich in einem vernünftigen Browser rendern lassen und per Screenshot ein Kachelstück als PNG speichern. Die Größe hast du ja: 12em × 6em; bei 16 Pixel Defaultschriftgröße also 192 × 96 Pixel.

LLAP 🖖

[pixxma]

Yo, so hatte ich es dann auch gemacht mit dem Kachelstück.

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.

Aber ich hab' ja auch so schon ordentlich profitiert 😉

MfG

pixxma

[Matthias Apsel]

Hallo pixxma,

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.

Ich will dir nicht zu nahe treten, aber der fiel mir dazu ein:

3 Mathematikstudenten und 3 Physikstudenten fahren Zug. Die Physikstudenten haben 3 Fahrkarten, die Mathematiker nur eine. Als der Schaffner in die Nähe kommt, gehen die drei Mathematiker auf eine Toilette, dieser klopft, die Fahrkarte wird unter der Tür durchgeschoben und abgestempelt zurückgeschoben. Bei der nächsten Zugfahrt haben die Physiker auch nur eine Fahrkarte gekauft, die Mathematikstudenten jedoch gar keine. Bei Herannahen des Schaffners gehen die Physiker auf eine Toilette, die Mathematiker auf die andere. Kurz bevor der Schaffner bei den Toiletten angekommen ist, geht einer der Mathematiker zu der anderen Toilette, klopft, und bittet um die Fahrkarte ...

- 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.

liest er und hat er … wenn er mit den Dreiecken fertig ist. Ganz sicher, gell @Gunnar Bittersmann?

Bis demnächst
Matthias

[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 🖖