Alternative zu Regions Pollyfill

[CrazyLopp]

Hallo zusammen,

Adobe hat ja eine CSS3 Spezifikation entwickelt, die es ermöglich Inhalte auf andere Elementre zu erweitern. Es sieht jedoch nicht so aus das diese Spezifikation wirklich übernommen wird, aus diesem Grund suche ich eine Alternative auf JavaScript Basis.

Ich habe zum Beispiel ein Div, welches 500px breit und 700px hoch ist und mit 1400 Wörtern gefüllt ist. Dieser Text passt ja nicht komplett in die Box rein. Der überstehende Inhalt soll nun auf andere Divs verteilt werden, bis kein Text mehr überragt.

Kennt jemand von euch eine Möglichkeit, wie man dies am besten umsetzen könnte? Oder wie man abfragen könnte ob der Inhalt zuviel für die Box ist und welcher Text nicht mehr zu lesen ist?

 

[cythux]

http://html.adobe.com/webplatform/layout/regions/


eine andere Alternative fällt mir dazu jetzt so auch nicht ein

 

[CrazyLopp]

Das ist ja die Entwicklung von Adobe, doch leider ist die Unterstützung nicht so groß.
Dann muss ich mal schauen wie ich es anders hinbekommen kann.

 

[fakerer]

Hi,
also ich habe von dem noch nie was gehört,
aber könnte mir jemand erklären wozu man so was machen will?

 

[CrazyLopp]

Hi,
also ich habe von dem noch nie was gehört,
aber könnte mir jemand erklären wozu man so was machen will?

Das ist relativ interessant wenn man z.B. Ein Magazinlayout oder ein Buchlayout online abbilden möchte. So kann der Content flexibel für jede abgebildete Seite sein. Im jetzigen Fall müsste der Content immer die länge haben wie eine Seite lang und breit ist und für jede Seite der Content explizit daraufhin angepasst werden. Mit Region Polyfill wird dies eben über CSS3 gesteuert. Ein Element hat den gesamten Content und dieses Element lagert den überstehenden Text auf andere Elemente aus.

Schau dir einfach mal die Links von cythux an, da sind Beispiele von Adobe gezeigt.

Viele Grüße

 

[cythux]

http://t3n.de/news/css-regions-aus-google-opera-525432/
http://alistapart.com/blog/post/css-regions-considered-harmful
http://compass-style.org/reference/compass/css3/regions/
http://caniuse.com/css-regions

und hier noch eine kleine Libary (experimental) http://adobe-webplatform.github.io/css-regions-polyfill/?promoid=KJDWL

 

[fakerer]

ahh vielen Dank, hatte mir die Links schon angesehen aber noch keinen richtigen Reim drauf machen können.
Aber jetzt ist es mir klar und würde durchaus Sinn machen wenn es alle Browser unterstützen würden.

Auf die schnelle würde ich sagen mit strlen strip_tags teilen aber so einfach ist das ja leider nicht.

Man könnte den Text Zeichen für Zeichen mit 2 counter durchlaufen. Der eine Zählt die Zeichen die angezeigt werden der andre wo dann geschnitten werden muss.
Mann muss sich dann noch überlegen wie man die HtmlTag alle erkennt.
Wenn man vielleicht vorher definieren kann das < und > im Fließtext irgendwie markiert werden so das sie nicht als HtmlTags erkannt werden könnte man dann ja einfach immer vom öffnenden < bis zum schließenden > den counter für die Zeichen die angezeigt werden stoppen.

Ich hoffe es ist halbwegs verständlich, und ich hab jetzt keinen Denkfehler

 

[CrazyLopp]

Das Problem ist nur das ja auch herausgefunden werden muss ab wann der Text übersteht, also bei wie viel Zeichen. Bei einer festen Box, die immer die gleichen Maßen hat könnte man es einfach testen, sofern es sich um eine Monospace Typo handelt und keine Umbrüche vorhanden sind. Sollte die Box jedoch flexibel sein, dann müsste dies dynamisch herausgefunden werden.

---

EDIT: Habe es jetzt mit CSS3 Cols umgesetzt, funktioniert auch einigermaßen.