[JS/DHTML] Tekst in kolommen

[Verwijderd]

Je ziet het niet veel op internet: tekst in kolommen naast elkaar. Een voorbeeld is www.iht.com. De gebruikte methode daar is gebaseerd op het volgende: print de tekst twee/drie keer in twee/drie layers naast elkaar en pas dan de positie van de layers aan om de tekst in elkaar te laten overlopen.

Ik heb zelf wat inelkaar geknutseld gebaseerd op het uitwisselen van DHTML objecten tussen twee layers en dan de offsetheights aflezen of deze ongeveer gelijk zijn. Ben ik opzich tevreden mee, maar eigenlijk zou je gewoon 1 tekstnode willen geven aan 2 layers.

Zou dat kunnen of is dat te simuleren? Of zijn er misschien andere suggesties?

[Blaise]

Het kan ook met php, door om de zoveel tekens een nieuwe kolom te beginnen. Je moet dan wel zorgen dat je het aantal tekens afrond op één woord.

edit: kan vast ook met javascript.

[ Voor 12% gewijzigd door Blaise op 12-04-2003 19:57 ]

[Clay]

Voor zover ik snap wat iht doet is dat idd de tekst gewoon kopieren naar N colommen, en dan met een vaste line-height en font-size posities bepalen per colom, zodat je bij het resizen geen half afgesneden regels boven en/of onderaan colommen krijgt. Prima oplossing. Snel en makkelijk, alleen zit je volgens mij wel vast aan die line-height/font-size, daar mogen geen uitzonderingen op zijn, en met plaatjes in de content moet je ook uitkijken. Daar lijkt het iig op.

Wie het ook gedaan hebben zijn 13thParallel. Hun script stopt letterlijk een stuk van de content in een hidden divje, en gaat dan zolang itereren met verschillende text knipsel lengtes tot alles netjes past. Voordeel is dat je dus niet vastzit aan lineheights en fontsizes; je kan dus alles in je content gooien wat je maar wil (al denk ik dat het script wel vastloopt op een image die hoger is dan de colom hoogte ). Nadeel is dat het natuurlijk niet live geresized kan worden, daar is het veel te zwaar voor.

Persoonlijk vind ik de IHT oplossing het mooist.

[Verwijderd]

Clay: Je vat de voor- en nadelen van die scripts goed samen volgens mij. De scripts zijn gebaseerd op vaste pixelgroottes en toevallig wou ik die juist loslaten voor mijn site, vandaar deze implementatie, alhoewel die ook niet ideaal is.

Nou ja, als iemand nog een dirty trick weet, hoor ik het graag.

edit: IHT kun je het beste vergelijken met een gokautomaat . Je print drie keer dezelfde kolom naast elkaar, zet er horizontale balken overheen zodat je maar een klein gedeelte ervan ziet, en past dan de verticale posities aan net als met die roldingen in een gokautomaat. De zichtbare hoogte moet precies een veelvoud zijn van de zinshoogte, die zodoende constant moet zijn (geen P'tje/H'tjes e.d.).

[ Voor 41% gewijzigd door Verwijderd op 13-04-2003 12:14 ]

[Verwijderd]

Verwijderd schreef op 12 April 2003 @ 23:34:
Nou ja, als iemand nog een dirty trick weet, hoor ik het graag.

Dit is een stuk lastiger probleem dan het lijkt. Ik heb voor http://www.singularit.com/index2.html?iSub=0&iCnt=0 min of meer hetzelfde gedaan als de 13th parallel peeps, denk ik, omdat daar ook verschillende line-heights, plaatjes en een context-gevoelig menu in wordt verwerkt.

Mijn methode is wel slow and dirty overigens:

• deel de tekst in paragrafen op
• bereken de beschikbare hoogte
• schrijf de paragrafen in sequence totdat je over de beschikbare hoogte gaat
• split de niet-passende paragraaf (op spaties (elk woord) of op punt+spatie (elke zin) en creeer een array met elk element
• schrijf elk element erbij totdat je over de hoogte heengaat
• wis het laatst geschreven element en begin daar een nieuwe kolom mee

Waarom slow? Omdat we NS4.x compatible wilden blijven moet voor elke verandering in de content de hele DIV opnieuw worden geschreven...
Bovendien ben ik een complete idioot waar het gaat om string-parsing en regular expressions dus loop ik tegen allerlei problemen op als het opsplitsen van HTML-tags enzo. En het bij elkaar houden van kopjes+paragrafen is helemaal klote.

Ik maak overigens nog verschil voor de tweede split per browser. De snellere browsers mogen op woord splitten. De langzamere op zin.

Gelukkig werkt het redelijk. Ik zal eens naar die van 13thP kijken. Die ziet er wat stabieler uit.

Achteraf was het niet helemaal de moeite waard overigens. Waarom?

• mensen zijn niet gewend op het net horizontaal te navigeren door een tekst. Dat betekent bijvoorbeeld dat ze de kolom-navigatie (1|2|... en vorige|volgende) niet snappen.
• Sterker nog mensen zien vaak niet eens de navigatie. IHT heeft dat nog iets duidelijker, overigens, dus het is waarschijnlijk een tekortkoming van het design zelf .
• Door de opdeling in kolommen is er voor het lezen van de tekst een x-aantal klikken extra nodig om door de hele tekst te kunnen bladeren. Dat is eigenlijk irritant.

^{/me vindt het er stiekum wel gelikt uit zien -- en dat is ook wat waard}

[Verwijderd]

Sterker nog mensen zien vaak niet eens de navigatie. IHT heeft dat nog iets duidelijker, overigens, dus het is waarschijnlijk een tekortkoming van het design zelf.

Het is waarschijnlijk beter om de kolommen die niet passen eronder te zetten ipv ernaast plus evt een layer scrollbar oid of iets ala IHT. Moet zeggen dat ik ook even zat te zoeken bij 13thP .

Oke, weer een script voor de verzameling . Ik zat 't wat te lezen en het viel me op dat de HTML parse code zo kort was, maar je hebt het probleem eenvoudiger gemaakt door de layout deels in je script te doen, zo te zien. Beetje dirty maar het werkt wel zeker?

[Verwijderd]

Netscape4 ondersteunt toch native multi-kolom inhoud mbv het element multicol? (is zijn tijd wat dat betreft zwaar vooruit )

[Verwijderd]

Ja, en in CSS3 zit 't ook

[Verwijderd]

ook op een iht achtige manier: http://www.rikkertkoppes.com/neptune/test.asp
da's mijn oplossing hiervoor, was effe een testcaseje, zoals de hele pagina overigens. Ben ook wel eens aan het stoeien geweest met een variabel aantal kolommen, afhankelijk van de browserbreedte, maar daar heb ik atm effe niks online van staan (was sowieso nog buggy mbt resizen (had het creeeren van nieuwe divs er gewoon niet ingestopt))

[2]

Verwijderd schreef op 14 april 2003 @ 00:06:
ook op een iht achtige manier: http://www.rikkertkoppes.com/neptune/test.asp

Waarom kan ik op de linkerkolom klikken en gebeurt er niks?

[Verwijderd]

He, je geeft de children een positie mee en maakt zo kolommen. Da's een leuk idee. Zit zelf te klooien met layers danwel tabellen om de nodes in te stoppen. Misschien werkt dit wel beter . In Moz krijg ik trouwens geen kolomteksten te zien; in IE wel.

Voor wie d'r geen genoeg van kan krijgen: mijn testpage zit onder m'n home button. Werkt alleen onder Moz atm .

[ Voor 4% gewijzigd door Verwijderd op 14-04-2003 08:42 ]

[Verwijderd]

kolom support komt misschien in CSS3:
http://www.w3.org/TR/css3-multicol/