¿Cómo? ¿Así?
Sería una de esas respuestas que generan más preguntas; porque no se me ocurre una razón lógica que la explique. Habrá que probar.
Lo de capturar imágenes me pareció un poco inútil,
jam1138 . Me refiero a que en el
IExplorer se verá algo como
Código:
primera línea.
segunda línea.
mientras que en el
Mozilla aparecerá como
Código:
primera línea.
segunda línea.
y lo del código fuente ..., bueno, ahí tienes razón.
cuando estaba por tipearte el ejemplo, tuve mi epifanía. Y creo que ya sé por qué pasa esto, al menos en un
pre.
Resulta que este tipo de cajas no sólo acepta algunos caracteres por debajo del 32, sino que además interpreta formatos, como pueden ser los de etiquetas HTML; y una de esas etiquetas es justamente
<br>.
Aquí los desarrolladores enfrentan un dilema, si el navegador convierte las etiquetas de un
pre, no puede ignorar un
br; pero si muestra "texto plano", en el documento se debe ver no sólo el caracter 9 (tabulador) sino también el 10 y el 13 (
return y
new line). El conflicto aparece cuando un código insertado tiene
Código:
primera línea.<br>
segunda línea.
porque
FF muestra ambos
break, el de texto y el de HTML; mientras que
IE optó por la solución más práctica : ve la etiqueta e ignora los caracteres (10 y 13), lo que no estaría mal salvo por el detalle de que también ignora el caracter 9.
Lo único que se me ocurre es que el navegador lea el contenido que se va a insertar en el
pre y si hay un
br que ignore todos los caracteres 10 y 13, pero si no hay
tag, que los muestre como un
break. Algo bastante difícil de implementar, por supuesto.
Dejo la herramienta que hice para probar, por si alguien quiere hacer más experimentos.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
var alfa= "alfa Primera. \r\n;Segunda.";
var bravo = "bravo Primera.";
bravo += "Segunda.";
var charly = "charly Primera. <br>Segunda.";
var delta = "delta Primera.\t" +
"\tSegunda.";
var eco = "eco Primera.<br>\r\nSegunda."
</script>
<style type="text/css">
body, textarea, input {color:#fff; background-color:#000; font:bold serif;}
pre, textarea {border:4px solid #fff; width:50%; }
</style>
</head>
<body>
<p>Cadenas</p>
var alfa= "alfa Primera. \r\nSegunda.";<br>
var bravo = "bravo Primera.";<br>
bravo += "Segunda.";<br>
var charly = "charly Primera. <br>Segunda.";<br>
var delta = "delta Primera.\t" +<br>
"\tSegunda.";<br>
var eco = "eco Primera.<br>\r\nSegunda."<br>
<div id="elDiv">
<pre id="elPre"> Pre<br>
pre</pre>
<textarea id=elTextarea> Textarea
textarea</textarea>
</div>
<br>
<input type="button" value="alfa en pre" onclick= "document.getElementById('elPre').innerHTML = alfa;">
<input type="button" value="bravo en pre" onclick= "document.getElementById('elPre').innerHTML = bravo;">
<input type="button" value="charly en pre" onclick= "document.getElementById('elPre').innerHTML = charly;">
<input type="button" value="delta en pre" onclick= "document.getElementById('elPre').innerHTML = delta;">
<input type="button" value="eco en pre" onclick= "document.getElementById('elPre').innerHTML = eco;">
<br>
<input type="button" value="alfa en textarea" onclick= "document.getElementById('elTextarea').value = alfa;">
<input type="button" value="bravo en textarea" onclick= "document.getElementById('elTextarea').value = bravo;">
<input type="button" value="charly en textarea" onclick= "document.getElementById('elTextarea').value = charly;" >
<input type="button" value="delta en textarea" onclick= "document.getElementById('elTextarea').value = delta;">
<input type="button" value="eco en textarea" onclick= "document.getElementById('elTextarea').value = eco;">
<br>
<textarea id="elTextarea2"></textarea>
<input type="button" value="Código Pre" onclick="document.getElementById('elTextarea2').value = document.getElementById('elPre').innerHTML;">
<br>
<textarea id="elTextarea3"></textarea>
<input type="button" value="Código Textarea" onclick="document.getElementById('elTextarea3').value = document.getElementById('elTextarea').value;">
</body>
</html>
Falta probar el código ASCII en vez de caracteres con barra de escape.