Designfrage zum Thema Layout von Text und Bild in .js Projekt

[theSplit]

Seit einiger Zeit arbeite ich an einem Markup Processor zur Darstellung von formatierten Text, aktuell auch Bildern und später eventuell auch Videoelementen, in einem Canvas. Dabei stoße ich aber auf ein Designproblem bzw. wie das zu erwartende Verhalten des Scripts sein soll im Umgang mit "floating" von Text und Bildelementen durch das Markup.

Dabei sieht es zur Zeit so aus, das Bilder links, recht und zentriert dargestellt werden können.
Screenshot:


Zentrierte Bilder nehmen immer eine ganze Zeile in Anspruch.

Aber ein Problem taucht auf, wenn das Markup unter anderem weitere Bilder enthält und wie damit fortgefahren werden soll.

Screenshot beigefügt mit Bemerkung, Markup in etwa wie folgt:
[src=html4strict]<BILD align="left"> normaler Text, welcher allerdings die Breite und <bi>Margin</> berücksichtigen soll[/src]


Und Bild, Text, Bild, Resttext, Bild rechtsbündig?, Resttext:
[src=html4strict]<BILD align="left"> normaler Text, welcher "hier" gebrochen werden soll <BILD align="left"> und hier nach dem Bild die Zeile ausfüllt? Und die Breite und <bi>Margin</> der Bilder berücksichtigen <BILD align="right"> soll[/src]

Sollte das Alignment hier überhaupt so berücksichtigt werden?


Könnte das Layout des Textes so aussehen?
[src=html4strict]| [x] Textanfang [x] kleines Bild dazwischen |
| [x] und hier fließt der Text weiter.... |
| bis zum Ende der Zeile. |[/src]

[x] ist ein Bildteil

*Im Browser wird es in etwa so gemacht - aber geht das nicht wie in meinem Diagramm besser in dem man den Text oberhalb des Bildes gleichsetzt und dann den Textfluss durchzieht bis man auf ein anderes Bildelement trifft, dann umbricht, zum Beispiel?
HTML dazu:


[src=html4strict]<div style="color: #fff; border: 1px solid #8b8b8b; background-color: #3a3a3a; padding: 10px; display: inline-block;">
<img src="starview1.jpg" height="50px" width="50px">Text <img src="starview2.jpg" height="70px" width="150px"> mehr <img src="starview2.jpg" height="70px" width="150px">Text<br/>
Und noch mehr Text <img src="SuperSize-Moon.png" height="70px" width="150px"> der hoffentlich überfüllt.
</div>[/src]
oder auch so der Korrektheit halber mit Float Argumenten:
[src=html4strict] <div style="color: #fff; border: 1px solid #8b8b8b; background-color: #3a3a3a; padding: 10px; display: inline-block;">
<img src="starview1.jpg" height="50px" width="50px" style="float:left">Text <img src="starview2.jpg" height="70px" width="150px"> mehr <img src="starview2.jpg" height="70px" width="150px" style="float:right">Text<br/>
Und noch mehr Text <img src="SuperSize-Moon.png" height="70px" width="150px" style="float:left;"> der hoffentlich überfüllt.<br/>und die Zeile wird nun umgebrochen<br/> wie geplannt.
</div>[/src]

Habt ihr Vorstellungen wie das Layouting besser funktionieren könnte/sollte oder ist das zuviel des Guten was angedacht ist?

 

[dexter]

Ich versteh leider nur Bahnhof.

Sollte das Alignment hier überhaupt so berücksichtigt werden?


Könnte das Layout des Textes so aussehen?
[src=html4strict]| [x] Textanfang [x] kleines Bild dazwischen |
| [x] und hier fließt der Text weiter.... |
| bis zum Ende der Zeile. |[/src]

[x] ist ein Bildteil

Ja.
verstehe ich Dich richtig, dass Du es so haben willst: https://ngb.to/attachment.php?attachmentid=28463&d=1418475609 ?
Hierzu musst Du den Container des Bildes und der Beschreibung (the next image...) links floaten. Und vor einem neuen Container clearen.
Ich glaube, sinnvoll wäre, wenn Du einen "grösseren" Screenshot bringst, was Du haben möchtest. so einzeln gestückelt - ääh zumindest ich kann da nur raten.

 

[theSplit]

Erstmal der gewünschte Screenshot wie das Layout "theoretisch" aussehen sollen könnte, aber..

Die Textblöcke sollten quasi "justified" oder normal berechnet innerhalb der Textbereiche fließen, dann aber im unteren Block auch die volle Fläche zwischen den Bildern verwenden um Text zu platzieren, dann unter den Bildern normal weiterfließen, so fern möglich.

..der Haken an der Sache ist, das ich so direkt kein HTML oder CSS verwenden kann!
Da alles was man sieht mit Javascript berechnet und auf ein Canvas-Element gezeichnet wird, Text wie auch Bild.
Ich glaube an dieser Stelle ist es leichter einfach das Projekt zu verlinken, da dort auch Demos sind wie es derzeit aussieht. (Link)
Nur zur Erklärung, jede JS Datei verwendet eine andere SourceNr.txt, darin ist das Markup enthalten welches gelesen und formatiert wird.

Auch meine Screenshots weiter oben, bis auf die zwei HTML Blöcke, sind von einem Canvas-Element aus dem Projekt.

Das Layout ist natürlich ein Glücksfall, es kann auch gut sein das ich zwei Bilder links angeordnet habe, in unterschiedlicher Größe, dann eines Rechts angeordnet - aber Mitten im Markup Text, dann das letzte Links angeordnet... oder ähnliches..

Daher die Frage wie so ein Use-Case aussehen kann.

*Nachtrag:
Ich vermute einfach mal das man die Position von Bildern separat vom Markup Text definieren muß um diese dann Pixelgenau bzw. durch Prozentangaben auf dem Canvas zu platzieren oder man kann Bilder nicht direkt in anderen Markup-Blöcke integrieren.
Sondern benutzt dann Bildreihen die dann dargestellt werden, ähnlich wie in dem Testcase, mit dem "S" Verlauf, wie auf dem ersten Screenshot im Startpost.

Eine andere Lösung fällt mir zumindest nicht ein.. da sonst das Layouten des Textes nicht funktionieren will ohne die Bilder auf der Seite bereits mit berechneten Größen zu kennen..

 

[Jester]

@theSplit:
Wenn ich Dich richtig verstehe, brauchst Du einen HTML-Renderer für <canvas>, der in HTML unmögliche Zusammenhänge per JS auf canvas umsetzen können soll

Schon in HTML ist es nicht möglich, das von Dir gepostete Beispiel zu beschreiben. Entweder kannst Du Bildelemente umfließen lassen (Problem: Zeilenhöhe und beidseitiges Umfließen, schweres Problem: (absolute) Positionierung im Text-Elternelement bei Beibehaltung des Textfluss'), oder Du kannst Bildelemente frei (absolut) in einem Elternelement positionieren, wobei Du den Textumfluss verlierst.

Beides in Verbindung gibt es imho nicht. Software, die so etwas kann, wäre Quark XPress oder Indesign, das aber auch nur ansatzweise.

Ich bin am Thema durchaus interessiert - sollte es Dir gelingen, einen Renderer zu schreiben, wäre ich für den Code (nur für Analyse-Zwecke) dankbar

J.

 

[godlike]

Beides in Verbindung gibt es imho nicht. Software, die so etwas kann, wäre Quark XPress oder Indesign, das aber auch nur ansatzweise.

Ansatzweise? Sowas können die beiden Programme ohne Probleme. Selbst mit individuell geformten Bildern oder Objekten. Hat allerdings wenig mit Web zu tun und dürfte hier weniger von Interesse sein.

 

[Jester]

@godlike:

Yup war marginal OT, es ging mir darum, die Mächtigkeit des Vorhabens zu skizzieren.
Und "ansatzweise", weil auch die beiden Softwares nicht in der Lage sind, ohne manuelle Definition und Zuweisung von Bereichen und Textflusslogik beliebige Layouts zu rendern.

J.

 

[dexter]

Und "ansatzweise", weil auch die beiden Softwares nicht in der Lage sind, ohne manuelle Definition und Zuweisung von Bereichen und Textflusslogik beliebige Layouts zu rendern.

Wie denn sonst? Mit reinsprechen?

Kopfkratzend ab.

 

[Jester]

@dexter:

Gegeben ist eine Layoutwüste in Textform. Dann bring mal mit so einer Vorlage ID oder QE dazu, das zu rendern.
Aber wir versumpfen in OT, daher raus.

 

[dexter]

In Pagemaker (grad spasseshalber probiert) brauch ich da etwa eine Minute dafür, keine 2.

 

[theSplit]

Erstmal Danke für die Diskussion und Anregungen! Ich muß aber gleich in so weit einlenken, das es nicht zwingend darum geht eine Layoutengine für perfekte Magazinlayouts zu erschaffen, die die von euch genannte Software bzw. einen Grafiker ersetzen soll oder kann.

Hauptaugenmerk des Projekts liegt darauf, beliebig formatierten Quelltext/Markup zu laden und dann, etwas aufgewertet mit simplen Parametern und Styling, darzustellen. Dass können Texte und Bilder und vielleicht bald auch noch Videos, wenn alles andere Fehlerfrei funktioniert, sein.
Das ganze Script kann theoretisch (ich kann nur leider nicht auf vielen Geräten testen...) , auf Geräten mit unterschiedlichen Displaygrößen, Textinhalte und Bilder flexibel in einem gerenderten Layout darstellen und garantieren das alle Inhalte trotzdem sichtbar bleiben und verfügbar sind so fern nur die Größe der Zeichenfläche und die Hauptschriftgröße entsprechend angepasst werden.

Aber b2topic:
Es wäre schon möglich das Layouting nur aufgrund des Textflusses und vorkommen der, mit Größen bestückten, Bildtags vorzunehmen. Nur stellst sich die Frage nach dem Nutzen, da man nur schon allein bei einer anderen Texteingangsgröße, in dem oder nachdem ein Bildtag liegt, ein absolut anderes Layout hätte was zu mal völlig fern von dem liegt was man "geplant" hatte. Setzt man hier dann noch eine variable Größe der Zeichenfläche mit drauf wird es noch bunter.
Allerdings könnte man diesem Problem auch mit dynamischer Bildgrößenanpassung etwas entgegenwirken, wird die Zeichenfläche schmaler, wird das vorher definierte Bild auch automatisch verkleinert bzw. für volle Breite optimiert. Da kommen mir schon wieder Ideen..

Alles in allem ist das aber leider sehr inkonsistent und ich schätze mal das in 98% der Fälle leider nur vermurkste Layouts herauskommen würden, außer man beschränkt sich auf nur ein Bild links und rechts. Bei allem anderen sehe ich nur die Chance mit absoluter, geplanter, Platzierung - optimiert für verschiedene Anzeigegrößen. Letzteres wäre aber eine ganz andere Herangehensweise, als es jetzt der Fall ist.

Die Idee mit den Bildgrenzen zu arbeiten, ist allerdings noch einen Zacken schärfer, da ginge noch was..