Quedé con culpa porque en este tema pusimos solamente versiones del efecto para
IE, así que empecé a trabajar en algo que funcionara también en
Firefox.
Resulta que en
Texto Vertical
hablé de un viejo experimento usando ASCII-Art, y como no tenía nada mejor, empecé a trabajar desde allí.
Ninguno de los 2 próximos ejemplos es exactamente ése, ni tampoco se acercan al
rotation, al
layout-flow o al
writing-mode de
MS; pero, como dije, los pongo para lavar culpas.
El primero se podría haber hecho con un escript, pero creo que así se entiende mejor. Está hecho con ASCII-CSS-Art y -por supuesto- no es un texto real sino "dibujado". Aunque no es muy serio, a alguien puede servirle.
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>
<title>BTLR ASCII CSS ART. </title>
<style type="text/css">
body {background-color:black; color:white; font-family:default; }
.bl{background-color:white; color:white; font-size:14px; line-height:6px;}
.ng{background-color:black; color:black; font-size:14px; line-height:6px;}
</style>
</head>
<body>
<h2>Texto a 270° dibujado con ASCII / CSS Art.</h2>
<blockquote>
<span class="bl">                 </span><br>
<span class="bl">               </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">                 </span><br>
<span class="bl">            </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">          </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">  </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">      </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">          </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">        </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><br>
<span class="bl">              </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">            </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">  </span><br>
Continúa en el mensaje siguiente.