Poner Letras en Vertical a 90 grados

sergi_climent · #1 (**permalink**) 26/10/2007, 01:27

Hola,

Tengo una tabla de resultados con varias Columnas, me gustaria saber si se puede poner el contenido de las cabeceras en vertical (90 grados) para q no ocupe tanto espacio? lo quiero hacer asi porque el contenido de las tabla son registros numericos q ocupan poquito pero la cabecera es mucho mas ancha y la tabla se expande demasiado....

es posible?????

PD: El contenido de las Cabeceras las Obtengo de una Base de Datos de MySql, sino ya lo hubiera hecho de alguna otra manera....

Salduso

sergi_climent · #2 (**permalink**) 26/10/2007, 03:09

Encontre esto: http://www.forosdelweb.com/f53/rotar-texto-389434/

pero no ser como adaptarlo para q me muestre los titulos de diferentes columnas en vertical.

Código HTML:

<table>
<tr>
<td>titulo1</td><td>titulo2</td>td>...</td><td>tituloN</td>
</tr>
...
</table>

Saludos de nuevo y gracias de antemano

sergi_climent · #3 (**permalink**) 26/10/2007, 09:22

Para IE, hay la posibilidad de hacerlo con una simple linia, pero en los demas navegadores como q no funciona...

Código:

	
textoverital{writing-mode: tb-rl;filter: flipv fliph;}

alguna ayudita q me saque del apuro?

Aunque sea poner:
T
I
T
U
L
O
1

saludos

Escoffie · #4 (**permalink**) 28/10/2007, 12:35

Hola sergi_climent

¿Qué usas para armar tu página? Si es PHP, y mueves tu pregunta para ese foro, puedo ayudarte con lo de:
T
I
T
U
L
O

Saludos, y espero tu respuesta.

sergi_climent · #5 (**permalink**) 29/10/2007, 01:38

Hola Escoffie,
si uso PHP para armar mi pagina, y el codigo q uso para crear la primera fila de titulos es el siguiente:

Código PHP:

  <?PHP 
$str_seccion  = "SELECT id_seccio, nom_seccio FROM seccio WHERE hores=1 ORDER BY nom_seccio"; 
$sql_seccion  = mysql_query($str_seccion) or die("Error SQL Cabecera Secciones: ".mysql_error()); 
$nreg_seccion = mysql_num_rows($sql_seccion); 
if($nreg_seccion!=0){ 
  while($res_seccion = mysql_fetch_row($sql_seccion)){ 
  ?> 
  <td width="1%"><?=htmlentities($res_seccion[1]);?></td>     
 <?PHP 
  }     
}

PD: hacer una funcion separando la palabra y encadenar una letra con un no me parece la solucion adecuada, ya q eso afecta al diseño, y no queda demasiado bien

Saludos

Escoffie · #6 (**permalink**) 29/10/2007, 12:01

Hola sergi_climent:

Para tenerlos como:
T
Í
T
U
L
O

... puedes hacer esto:

Código PHP:

  <?php
$cadena=utf8_encode("Mi Titulo");
echo $cadena[0]."<br/>";
echo $cadena[1]."<br/>";
echo $cadena[2]."<br/>";
echo $cadena[3]."<br/>";
echo $cadena[4]."<br/>";
echo $cadena[5]."<br/>";
?>

sergi_climent · #7 (**permalink**) 30/10/2007, 01:32

Hola de nuevo y gracias por tu respuesta!

si pongo BR, quedan las letras con una separacion demasiado grande... y eso afecta al diseño, ya q hay un titulo q supera los 14 caracteres...

hay alguna otra manera de poder hacerlo?

la opcion q he encontrado y mas me ha gustado es la siguiente, pero no ser como adaptarla a mis necesidades!

Código HTML:

<!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.</title>
<script type="text/javascript">
function btlr(){
var contFin = "";
var objIni = document.getElementById( "derecho" );
var objFin = document.getElementById( "torcido" );
var alcho = parseInt(objIni.offsetHeight);
var anto = parseInt(objIni.offsetWidth);
var contIni = objIni.innerHTML;
var i , j;
objFin.style.height = anto +"px";
objFin.style.width = alcho +"px";

for(i=0; i<alcho; i++){
for(j=0; j<anto; j++){
contFin += "<div style='position:absolute; top:"+(anto-j-1)+"px; left:"+i+"px; background-color:#ffffff; height:1px; width:1px; overflow:hidden'><div style='white-space:nowrap; cursor:not-allowed; margin-left:"+ (j*-1) +"px; margin-top:"+(i*-1)+"px; background-color:#ffffff; overflow:hidden;'>"+ contIni +"</div></div>"}}

objFin.innerHTML = contFin;
}
//onload = btlr;
</script>
<style type="text/css">
body{color:#ffffff; background-color:#000000; }
#derecho , #torcido {position:relative; font: bold 16px sans-serif;postion:relative; border-collapse:collapse; color:#000000; background-color:#ffffff; overflow:hidden;}
</style>
</head>
<body>
<h2>Simulaci&oacute;n de texto rotado a 270°. ( IE 5.5+, FF )</h2>

<p><span id="derecho">Foros del Web</span></p>

<div id="torcido"> <input type="button" value="270°" onclick="btlr(); return false"> Clic para rotar. ( El efecto puede demorar varios segundos en mostrarse. )</div>

</body>
</html>

Link : http://www.forosdelweb.com/f53/rotar...4/#post2027009

Muchas Gracias de antemano,

Saludos

sergi_climent · #8 (**permalink**) 06/11/2007, 04:48

Hola de nuevo, alguien podria ayudarme a adaptar este codigo para q una cabezera dinamica de una tabla se mostrara en vertical?

es decir, trabajo en PHP y Mysql. Y para mostrar la cabecera de una tabla uso una tabla de Mysql con los Registros q tiene, lo quiero poner en vertical xq asi me ocupara menos espacio... a ver si me podeis hechar una mano...
el codigo q uso para la cabecera es el siguiente

Código PHP:

  <? 
    $str_seccio  = "SELECT id_seccio, nom_seccio FROM seccio WHERE hores=1 ORDER BY nom_seccio"; 
    $sql_seccio  = mysql_query($str_seccio) or die("Error SQL Cabecera Secciones: ".mysql_error()); 
    $nreg_seccio = mysql_num_rows($sql_seccio); 
    if($nreg_seccio!=0){ 
        while($res_seccio = mysql_fetch_row($sql_seccio)){ 
        ?> 
        <td class="capceleravertical" height="20px"><?=htmlentities($res_seccio[1]);?></td>     
        <? 
        }     
    } 
    ?>

muchas gracias

Saludos

sergi_climent · #9 (**permalink**) 22/11/2007, 02:44

Hola de nuevo, sigo con el mismo dilema??? alguien me puede hechar una mano? o las dos?

Saludos y gracias de antemano

paganum · #10 (**permalink**) 24/11/2007, 07:59

Lo que se me ocurre en estos momentos (aunque lo veo una solucion nada estetica)
mira lo que puedes hacer es desmembrar cada titulo osea a cada palabra dividirla por letras y hacer algo asi

<td >
C
a
b
e
c
e
r
a
</td>

claro esto en php por cada letras que sacas y muestras le pones un $letra[$i],
y en css creas un estilo para parrafo
p {line-height:0.3em;} por ejemplo, bueno es algo que se me ocurrio.........quizas funcione o quizas no, de todas maneras haber si lo pruebo y te comento..............

paganum · #11 (**permalink**) 24/11/2007, 08:39

Bueno lo que me salio en vertical es lo siguiente:

<?php
$variable="Cabecera";
$variable_len=strlen($variable);
echo "<td>";
for($i=0;$i<=$variable_len;$i++)
{
echo "".substr($variable, $i,1)."";
}
echo "</td>";
?>

y como te dije anteriormente para que no tengas separaciones largas en css usa
p {
line-height:0.3em;
}
o juega con eso, y en variable puedes asignarle tu resultado de la bd $res_seccion[1]

AlZuwaga · #12 (**permalink**) 24/11/2007, 12:07

Ya que usas php... por qué no hacés uso de GD para crear una imagen con los textos en cuestión y rotarlas 90º dinámicamente?

sergi_climent · #13 (**permalink**) 26/11/2007, 01:41

Hola a todos y gracias por contestar...

Cita:

Iniciado por Al Zuwaga

Ya que usas php... por qué no hacés uso de GD para crear una imagen con los textos en cuestión y rotarlas 90º dinámicamente?

me parece la opcion mas factible lo unico q no tengo mucho por mano esta libreria, a ver si alguien me podria hechar una manita de como puedo transformar un texto en imagen...

Gracias de antemano,

Saludos

sergi_climent · #14 (**permalink**) 26/11/2007, 05:01

consegui hacer eso en PHP
aqui dejo el codigo por si alguien se sirve

Código PHP:

  <?php  
header("Content-type: image/gif");  
//imagecreatefromgif -- Crear una nova imatge a partir de un arxiu o URL 
//http://es.php.net/manual/es/function.imagecreatefromgif.php 
$img1 = imagecreatefromgif("home.gif");  
//Tipus de Letra 
$fuente = "daniela.ttf";  
//imagecolorallocate -- Reserva un color per una imatge 
//http://es.php.net/manual/es/function.imagecolorallocate.php 
$color = imagecolorallocate($img1,255,255,255);  
//Texte q convertirem amb Imatge 
$paraula = "Manteniment fresc"; 
//imagettftext -- Escriu un texte sobre la imatge utilitzan les fonts TrueType 
//http://es.php.net/manual/es/function.imagettftext.php 
imagettftext($img1,13,90,15,80,$color,$fuente, $paraula);  
//imagegif -- Produir la sortida d'una imatge al navegador o a un arxiu 
//http://es.php.net/manual/es/function.imagegif.php 
imagegif($img1);  
//imagedestroy -- Destrueix una imatge 
//http://es.php.net/manual/es/function.imagedestroy.php 
imagedestroy($img1);  
?>

JavierB · #15 (**permalink**) 26/11/2007, 09:39

Creo que este mensaje será más útil en el foro de PHP.

Movido desde Css.

Saludos,

sergi_climent · #16 (**permalink**) 26/11/2007, 10:12

Antes de q movieran el Post, hice la continuacion en PHP donde se han solucionado un par de cosas pero aun me keda alguna cosita mas q solventar.
aqui dejo el LINK:
http://www.forosdelweb.com/f18/ph-p-...-linea-536018/