Cross-browser text-overflow

[TeeDee]

Na gisteren een hele hoop gezocht, gevonden en geprobeerd te hebben kom ik toch hier nog even een idee/tip opdoen.

Het gaat hier om dit kleine stukje CSS:

Cascading Stylesheet:

white-space:nowrap;
overflow:hidden;
-o-text-overflow:ellipsis; /* prop. opera */ 
text-overflow:ellipsis; /* ie only */

Nu zou ik text-overflow graag ook voor Fx aan de praat willen hebben.

Als eerste heb ik hier het e.e.a. bekeken. Daar kwamen o.a. een paar resultaten hieronder uit.

Optie 1: werk aardig, alleen zal de ... er altijd staan.
Optie 2: dit gaat uit van een n aantal karakters. 100 x een w is langer dan 100 x een i.
Optie 3: nog niet getest, maar ik ben eigenlijk huiverig om Prototype te gaan gebruiken voor zoiets triviaals. (deze optie is dus niet direct afgeschoten).
Optie 4: Dit is een bijna netjes werkend iets. Nadeel: karakters kunnen worden afgebroken.

Als laatste in de zoektocht ben ik eens gaan kijken naar hoe het op de Frontpage gedaan wordt. Ik moet zeggen: ik heb 3 functies kunnen isoleren, alleen maakt dit gebruik (afaik) van een dusdanig aantal niet te vinden variabelen dat ik dat maar opgegeven heb.

De hamvragen: Is er iemand die een ideale oplossing heeft en wanneer gaat Fx deze CSS specificatie opvolgen?

[Clay]

Bij de comments van optie 3 staat wel een goeie opmerking:

I would think the why part of this is important - the only legit use I’ve seen of text-overflow:ellipsis; is in data tables - for preserving the table’s dimensions in case of to much content.

Of course, you have to provide some way to get to that content…

Waarom wil je die tekst afbreken, waar kan je het wel volledig lezen, en hoezo mag het niet wrappen naar een volgende regel. Css is juist zo goed in het tonen van content op verschillende manieren niet in het verbergen ervan zodat het onleesbaar wordt ...

[CyPh]

TeeDee schreef op donderdag 28 februari 2008 @ 11:56:

Als laatste in de zoektocht ben ik eens gaan kijken naar hoe het op de Frontpage gedaan wordt. Ik moet zeggen: ik heb 3 functies kunnen isoleren, alleen maakt dit gebruik (afaik) van een dusdanig aantal niet te vinden variabelen dat ik dat maar opgegeven heb.

De frontpage werkt niet op de manier die jij bedoelt als ik goed begrijp wat je wilt (dynamisch text afkorten). Op de frontpage worden texten gewoon vast afgekort.
Net als hierboven snap ik niet de echte meerwaarde van het dynamisch kunnen krimpen van text


edit op hieronder:

Dat was vroeger zo, sinds de nieuwe layout echter niet meer

wtf bij mij doet hij dat niet Maar dan heb ik niets gezegd

[ Voor 19% gewijzigd door CyPh op 28-02-2008 16:11 ]

[crisp]

Over onze implementatie (javascript-based inderdaad) moet ik maar eens gaan bloggen geloof ik

Clay schreef op donderdag 28 februari 2008 @ 16:01:
Bij de comments van optie 3 staat wel een goeie opmerking:

[...]

Funny, in IE werkt text-overflow niet eens in non-fixed layout tables, en in Firefox 3 zal dat ook niet meer kunnen werken aangezien ze in al hun wijsheid hebben besloten IE's table-rendering te gaan emuleren. Alleen Opera kan nu nog overweg met (-o-)text-overflow in non-fixed layout tables...

CyPh schreef op donderdag 28 februari 2008 @ 16:07:
[...]


De frontpage werkt niet op de manier die jij bedoelt als ik goed begrijp wat je wilt (dynamisch text afkorten). Op de frontpage worden texten gewoon vast afgekort.

Dat was vroeger zo, sinds de nieuwe layout echter niet meer

[ Voor 23% gewijzigd door crisp op 28-02-2008 16:08 ]

[TeeDee]

Clay schreef op donderdag 28 februari 2008 @ 16:01:
Bij de comments van optie 3 staat wel een goeie opmerking:
[...]
Waarom wil je die tekst afbreken, waar kan je het wel volledig lezen, en hoezo mag het niet wrappen naar een volgende regel. Css is juist zo goed in het tonen van content op verschillende manieren niet in het verbergen ervan zodat het onleesbaar wordt ...

Het is ook niet mijn idee. De reden is ongeveer exact als die op de t.net frontpage

crisp schreef op donderdag 28 februari 2008 @ 16:08:
Over onze implementatie (javascript-based inderdaad) moet ik maar eens gaan bloggen geloof ik

Mooi. Vanavond klaar
Serieus: dat zou mooi zijn. Als ik de > 1000 regels JS een beetje globaal doorgenomen heb, zijn de 3 methods een generieke oplossing voor in principe alles? Bij mij gaat het alleen om 1 klein elementje van de site. Daarom ook dat een belachelijk grote library (voor dit doeleind) als Prototype eigenlijk geen optie is.

[Blaise]

Zo ingewikkeld is het toch niet om zelf te scripten voor de browsers die het niet native ondersteunen (zolang je het niet in tabellen hoeft te ondersteunen)?

1. Je doet eerst een ruime schatting (N) van het maximale aantal tekens dat op één regel past.
2. Je reduceert de string tot N tekens.
3. Als het aantal tekens van de string niet op één regel past (kan je checken met scrollWidth van parent element) haal je een teken van de string af, en doe je er "..." achter.
4. Herhaal stap 3 tot de string op één regel past.

[Woudloper]

crisp schreef op donderdag 28 februari 2008 @ 16:08:
Over onze implementatie (javascript-based inderdaad) moet ik maar eens gaan bloggen geloof ik

Denk het ook, want dat is de implementatie waar ik vanuit gegaan ben

[crisp]

Blaise schreef op donderdag 28 februari 2008 @ 18:24:
Zo ingewikkeld is het toch niet om zelf te scripten voor de browsers die het niet native ondersteunen (zolang je het niet in tabellen hoeft te ondersteunen)?

1. Je doet eerst een ruime schatting (N) van het maximale aantal tekens dat op één regel past.
2. Je reduceert de string tot N tekens.
3. Als het aantal tekens van de string niet op één regel past (kan je checken met scrollWidth van parent element) haal je een teken van de string af, en doe je er "..." achter.
4. Herhaal stap 3 tot de string op één regel past.

Dat is inderdaad de basis, maar wat tips & tricks om dat ook nog performant te maken zijn denk ik niet onontbeerlijk