Bild nächträglich in text einfließen lassen.

[Der Felix]

Hi,
ich hoffe mir kann jemand weiter helfen, auch wenn die Antwort ist es geht nicht.
Ich woltle fragen ob ich nachträglich in einen Text ein Bild einbauen kann.
Etwa so ...

Das problem ist halt es soll bei vielen Texten sein und die kommen aus einer Datenbank, hab halt ncht genau gefunden ob das irgendwie geht ohne bei jeden Text in der DB das einzufügen.

Vielleicht hat jemand eine Idee, schonmal Danke.
Felix

[Gunnar Bittersmann]

@@Der Felix:

nuqneH

Etwa so ...

Was genau heißt „etwa“?

Das Bild oben zu positionieren wäre kein Problem. Das Bild unten zu positionieren (untere Bildkante auf Höhe der unteren Textboxkante) – keine Chance.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

keine Chance.

Sollte heißen: Keine Chance mit HTML und CSS.

Man könnte ein JavaScript schreiben, das (bei ausgeblendetem Bild und Text) iterativ das Bild solange im Text verschiebt, bis die Unterkanten von Bild und Text übereinstimmen (berechnete Positionen der Oberkanten von Bild und Text auslesen und die berechneten Höhen aufaddieren). Danach lässt man beides anzeigen.

Qapla'

[Beat]

ich hoffe mir kann jemand weiter helfen, auch wenn die Antwort ist es geht nicht.
Ich woltle fragen ob ich nachträglich in einen Text ein Bild einbauen kann.

Knacknuss!

Das problem ist halt es soll bei vielen Texten sein und die kommen aus einer Datenbank, hab halt ncht genau gefunden ob das irgendwie geht ohne bei jeden Text in der DB das einzufügen.

Vielleicht hat jemand eine Idee, schonmal Danke.

Ist es erlaubt, an einem geeigneten Punkt den Knoten zu splitten und dazwischen das <img> Element einzufügen?
Eine andere Lösung sehe ich nicht.

Besteht eine Information über die Breite des Zielcontainers?
Schriftgrösse?
Wenn ja, lässt sich etwas berechnen und der Splitpunkt setzen.
Wenn nicht, tschüss!

Bildhöhe * Blockbreite - Bildbreite * Bildhöhe = Textfloatnutzfläche.
Berechne, wieviel Text für die verwendete Schrift ca hineinpasst.
Schneide dem text an geeigneter Stelle den Text ab.
Ermittle den Elementtyp des zu schneidenden Texts
Erstelle einen neuen Textknoten für den abgschnittenen Text.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Besteht eine Information über die Breite des Zielcontainers?
Schriftgrösse?
Wenn ja, lässt sich etwas berechnen und der Splitpunkt setzen.

Glaub ich nicht. Über serverseitiges Berechnen brauchen wir wohl nicht zu reden. Wie ließe sich mit JavaScript die tatsächlich verwendete Schriftgröße auslesen?

Und selbst wenn das ginge, auf unterschiedlichen Systemen (Windows vs. Linux vs. Mac) ist derselbe Text in derselben Schriftart und -größe unterschiedlich viele Pixel breit, so dass sich unterschiedliche Zeilenumbrüche ergeben könnten.

Qapla'

[Beat]

Besteht eine Information über die Breite des Zielcontainers?
Schriftgrösse?
Wenn ja, lässt sich etwas berechnen und der Splitpunkt setzen.

Glaub ich nicht. Über serverseitiges Berechnen brauchen wir wohl nicht zu reden. Wie ließe sich mit JavaScript die tatsächlich verwendete Schriftgröße auslesen?

Du brauchst nicht die Schrift zu kennen um deren Raumbedarf zu erfahren.

Und selbst wenn das ginge, auf unterschiedlichen Systemen (Windows vs. Linux vs. Mac) ist derselbe Text in derselben Schriftart und -größe unterschiedlich viele Pixel breit, so dass sich unterschiedliche Zeilenumbrüche ergeben könnten.

Auch das lässt sich empirisch erfassen.

mfg Beat

[Fer Felix]

Ja so in etwa war falsch formuliert, soll eigentlich genau so aussehen :-).

Naja dacht es mir schon bald. Und ja oben wär nicht das Problem.
Hätte ja sein können gibt ein super Trick irgendwie eine Div zu erstellen, das Bild absolut zu positionieren und dann den Rest mit text zu füllen.

Na gut danke erstmal für eure antworten.

Ich werd mal sehen ob ich den Text irgendwo automatishc trennen kann und dann das Bild einfügen kann.

[Gunnar Bittersmann]

@@Fer Felix:

nuqneH

das Bild absolut zu positionieren

Damit wäre das Bild aus dem normalen Fluss genommen, der Text würde so gerendert, als ob das Bild nicht da wäre, er könnte also nicht um das Bild herumfließen.

Qapla'