[TIPS & TRICKS] Preservare white spaces in tag PRE su IE e gli altri

[andr3a]

non so quanto sia "old", non so quanti abbiano risolto ... mentre facevo una pagina di demo per un parser mi sono accorto del fastidiosissimo problema del tag PRE su IE.

Il sunto è questo:

<pre id="test"></pre>
<script type="text/javascript"><!--//
	document.getElementById("test").innerHTML = "hello\nworld";
//--></script>

una cosa tanto banale quanto non scontata come risultato, la scritta diventa "hello world" in linea su tutti gli IE, dal 4 al 7.

Come risolvere ?
Leggendo in rete ho visto soprattutto tricks che sfruttano innerText, con altri tricks che sfruttano altri metodi per rendere innerText compatibile con Netscape o browsers che non lo supportano.

Il problema di innerText
se usate questo metodo una sola volta, andate tranquilli, se riusate innerText per 2 volte, andate (o meglio mandate) a benedire il pre, soprattutto se ci sono tags come strong, span o altro al suo interno, questi vengono mostrati.

... e quindi ? Come risolvere ?
Semplicemente sfruttando il fatto che IE è stupido, quindi senza scomodare tutti gli altri che si comportano come dei browsers, quali sono, a differenza di IE, che ha sempre avuto, e probabilmente sempre avrà, dei comportamenti anomali (leggi fa schifo).

Prendere in giro IE ? ... basta outerHTML

<pre id="test"></pre>
<script type="text/javascript"><!--//
	function ie() {
		var	browser = navigator.userAgent.toUpperCase();
		return (browser.indexOf("MSIE") >= 0 && browser.indexOf("OPERA") < 0);
	};
	if(!ie())
		document.getElementById("test").innerHTML = "hello\nworld";
	else
		document.getElementById("test").outerHTML = "<pre id=\"test\">hello\nworld</pre>";
//--></script>

Facile ?

[kentaromiura]

Originariamente inviato da andr3a
non so quanto sia "old", non so quanti abbiano risolto ... mentre facevo una pagina di demo per un parser mi sono accorto del fastidiosissimo problema del tag PRE su IE.

Il sunto è questo:

<pre id="test"></pre>
<script type="text/javascript"><!--//
	document.getElementById("test").innerHTML = "hello\nworld";
//--></script>

una cosa tanto banale quanto non scontata come risultato, la scritta diventa "hello world" in linea su tutti gli IE, dal 4 al 7.

Come risolvere ?
Leggendo in rete ho visto soprattutto tricks che sfruttano innerText, con altri tricks che sfruttano altri metodi per rendere innerText compatibile con Netscape o browsers che non lo supportano.

Il problema di innerText
se usate questo metodo una sola volta, andate tranquilli, se riusate innerText per 2 volte, andate (o meglio mandate) a benedire il pre, soprattutto se ci sono tags come strong, span o altro al suo interno, questi vengono mostrati.

... e quindi ? Come risolvere ?
Semplicemente sfruttando il fatto che IE è stupido, quindi senza scomodare tutti gli altri che si comportano come dei browsers, quali sono, a differenza di IE, che ha sempre avuto, e probabilmente sempre avrà, dei comportamenti anomali (leggi fa schifo).

Prendere in giro IE ? ... basta outerHTML

<pre id="test"></pre>
<script type="text/javascript"><!--//
	function ie() {
		var	browser = navigator.userAgent.toUpperCase();
		return (browser.indexOf("MSIE") >= 0 && browser.indexOf("OPERA") < 0);
	};
	if(!ie())
		document.getElementById("test").innerHTML = "hello\nworld";
	else
		document.getElementById("test").outerHTML = "<pre id=\"test\">hello\nworld</pre>";
//--></script>

Facile ?

piccola aggiunta, se la compatibilità con IE 4 non interessa si puo' fare cosi':
compatibile con IE 5+
(il 7 non so come ragiona, ma finche' non viene rilasciato lo includiamo, in realtà se supportasse il comportamento standard basterebbe cambiare il commento condizionale

usiamo il commento condizionale cosi' non occorre sniffare IE:

/*@cc_on
if(0)
@*/
document.getElementById("test").innerHTML= "hello\nworld";
/*@cc_on
document.getElementById("test").outerHTML="<pre id=\"test\">hello\nworld</pre>";
@*/

ps: questo metodo ha uno svantaggio PERDE tutti gli attributi di pre, quindi bisognerebbe riscriverli con una for in

ps2:volendo si puo escludere il 1o commento ovvero

/*@cc_on
if(0)
@*/

[andr3a]

Originariamente inviato da kentaromiura

ps: questo metodo ha uno svantaggio PERDE tutti gli attributi di pre, quindi bisognerebbe riscriverli con una for in

la riassegnazione è fatta a mano, ovvio che perde tutto se non sai che pre è ... ma se sai che quel pre esatto riscrivi gli attributi e pace (oppure fai il for in, oppure fai una var con l'inizio dei pre e tanto di attributi che sai di dover cambiare), d'altro canto non credo ci siano altre soluzioni


P.S. togli compatibilità per mettere lostesso un if/else, tanto vale farlo in codice senza hacks, o no ? :master:

[kentaromiura]

Originariamente inviato da andr3a
la riassegnazione è fatta a mano, ovvio che perde tutto se non sai che pre è ... ma se sai che quel pre esatto riscrivi gli attributi e pace (oppure fai il for in, oppure fai una var con l'inizio dei pre e tanto di attributi che sai di dover cambiare), d'altro canto non credo ci siano altre soluzioni


P.S. togli compatibilità per mettere lostesso un if/else, tanto vale farlo in codice senza hacks, o no ? :master:

l'if e' codice pulito invece un hack per definizione e' un hack..

quindi e' del codice che da qui a qualche anno potrà venir rimosso perche' considerato obsoleto,
quindi deve essere brutto a vedersi [come dice crockford]

a parte gli scherzi, con il tuo codice obblighi tutti i browser a fare un controllo, [e se un domani firefox contenesse nell'userAgent MSIE, cosi' come fa opera per fingersi un altro?]
quindi penalizzi, anche se di poco tutti i browser per ...IE ,
visto che IE4 ormai non lo usa piu' nessuno il codice da me scritto e' una valida ALTERNATIVA al tuo metodo, visto che obbliga solo IE a effettuare un istruzione in piu'.
poi dipende sempre dalle esigenze.

ps: Vabbe' so che e' logico, ma se esponi una soluzione devi sempre elencare pregi e difetti della stessa per chi non lo sapesse.

[andr3a]

Originariamente inviato da kentaromiura
visto che IE4 ormai non lo usa piu' nessuno il codice da me scritto e' una valida ALTERNATIVA al tuo metodo, visto che obbliga solo IE a effettuare un istruzione in piu'.

ma che discorso è ? ... e se un domani FireFox dovesse trattare quell'hack come IE ? :rollo:

stiamo parlando di un solo if ... e ne parliamo come un problema perchè un'operazione in più ? :master:

io resto fedele al codice sensato e pulito, senza hacks, ben vengano comunque alternative purchè le motivazioni siano sensate

[kentaromiura]

Originariamente inviato da andr3a
ma che discorso è ? ... e se un domani FireFox dovesse trattare quell'hack come IE ? :rollo:

e ma essendo un commento condizionale puoi aggiungere un if IE, basterebbe cambiare il commento

stiamo parlando di un solo if ... e ne parliamo come un problema perchè un'operazione in più ? :master:

no, ma e' pur sempre un alternativa, non migliore ne peggiore, inoltre a differenza dello sniff qui sei sicuro al 100% di beccare IE e non il browser pimpolopampoloparinpanpu' che si identifica come MSIE pur non essendolo.

io resto fedele al codice sensato e pulito, senza hacks, ben vengano comunque alternative purchè le motivazioni siano sensate

ovvio, ma lo scopo degli hack e' quello di rimuoverli quando non piu' necessari


andr3' mica volevo fare chissacheccosa, ho solo elencato un metodo alternativo che ha dei pro
[sicurezza di beccare IE e se sul 7 non servisse basterebbe usare un [if IE lt 7],
non obblighi tutti gli altri browser ad eseguire codice inutile
e dei contro
[e' un hack, non supporta IE 4]

rileggi, non ho mai denigrato il tuo metodo.