Testo in verticale e centrato nella cella

**abellos** · 19-04-2016, 10:41

Ciao ho questa pagina html che devo stampare

codice:

<html>
<head>
<style type="text/css">
.vertical { 
	text-align: center;
	display: block;
	width: 1.1em;
	letter-spacing: 1.1em;
	word-break: break-all; 
 }
</style>
</head>
<body style="margin-top: 30.77mm; margin-left: 26.97mm; margin-bottom: 0mm; margin-right: 0mm;"  title="Clicca per stampare">
		<!-- onclick="self.print();"




		-->
		
		
		<table border="1" style="margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;" cellpadding="0" cellspacing="0">
		
		<tr>		
		<!-- colonne 40 -->
		
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100001</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100002</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100003</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100004</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100005</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100006</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100007</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100008</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100009</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100010</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100011</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100012</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100013</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100014</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100015</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100016</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100017</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100018</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100019</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100020</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100021</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100022</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100023</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100024</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100025</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100026</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100027</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100028</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100029</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100030</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100031</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100032</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100033</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100034</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100035</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100036</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100037</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100038</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100039</td>
			
			<td class="vertical" style="width:6.5mm; height: 146mm; margin-left: 0mm; margin-right: 0mm; margin-top: 0mm; margin-bottom: 0mm;">100040</td>
					
		</tr>
		
		</table>
		
</body>
</html>

sono le striscioline di carta delle cartelline sospese (amache) da inserire in un armadio.
Cercando su forum sono riuscito a scrivere in verticale (funziona solo con explorer ma non e' un problema, va benone) ma non riesco a centrare il testo nella cella, mi sapete dare una mano? grazie

**carlomarangoni** · 19-04-2016, 13:59

Questo funziona con IE e FF

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
.vertical {
    word-break: break-all; 
    letter-spacing: 0.3em;
 }
</style>

</head>

<body>
<table width="1000" border="1" cellspacing="0" cellpadding="0">
      <tr class="vertical">
            <td width="25" height="551" align="center" valign="middle">123456789</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
            <td width="25" height="551" align="center" valign="middle">&nbsp;</td>
      </tr>
</table>

</body>
</html>

**KillerWorm** · 19-04-2016, 14:03

Ciao, si può trovare una "semplice" soluzione usando flexbox.
Non ti nascondo però che trovo il tuo codice abbastanza ridondante e poco ottimale, già per il fatto che funziona solo su IE (anche se per te non è un problema).

Io lo rivedrei completamente.
Ti posto una delle prove che ho fatto. Ho usato chiaramente flexbox (che non funziona su vecchie versioni di IE) e ho rivisto l'intera struttura html separandola, inoltre, dal css (come è sempre consigliabile fare).

Puoi modificare le varie proprietà del css per personalizzare caratteri, colori, bordi, dimensioni e quant'altro, come meglio credi.
Non ho avuto tempo di commentare il codice ma, se hai bisogno di chiarimenti, chiedi pure.
Vedi intanto se può andarti bene come soluzione.

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Etichette 6.5 x 146 mm</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        margin: 20mm 0 0 15mm;
      }
      .etichette, .etichette li{
        border: dotted #999;
        margin: 0;
        padding: 0;
        float: left;
        box-sizing: border-box;
      }
      .etichette li{
        width: 6.5mm;
        height: 146mm;
        border-width: 0 0 0 1px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .etichette b{
        font: bold 12pt/120% Arial;
        border: 1px solid #88d;
        border-radius: 5px;
        width: 3mm;
        padding: 3mm .5mm;
        word-wrap: break-word;
        white-space: pre-wrap;
        display: block;
      }
      .etichette{
        border-width: 1px 1px 1px 0;
        list-style: none;
      }
    </style>
  </head>
  <body title="Clicca per stampare">
    <ul class="etichette">
      <li><b>1</b>
      <li><b>02</b>
      <li><b>003</b>
      <li><b>100004</b>
      <li><b>100005<br><br>*<br>A</b>
      <li><b>100006</b>
      <li><b>100007</b>
      <li><b>100008</b>
      <li><b>100009</b>
      <li><b>100010</b>
      <li><b>100011</b>
      <li><b>100012</b>
      <li><b>100013</b>
      <li><b>100014</b>
      <li><b>100015</b>
      <li><b>100016</b>
      <li><b>100017</b>
      <li><b>100018</b>
      <li><b>100019</b>
      <li><b>100020</b>
      <li><b>100021</b>
      <li><b>100022</b>
      <li><b>100023</b>
      <li><b>100024</b>
      <li><b>100025</b>
      <li><b>100026</b>
      <li><b>100027</b>
      <li><b>100028</b>
      <li><b>100029</b>
      <li><b>100030</b>
      <li><b>100031</b>
      <li><b>100032</b>
      <li><b>100033</b>
      <li><b>100034</b>
      <li><b>100035</b>
      <li><b>100036</b>
      <li><b>100037</b>
      <li><b>100038</b>
      <li><b>100039</b>
      <li><b>100040</b>
    </ul>
  </body>
</html>

EDIT:
@carlomarangoni, scusami, non avevo visto la tua risposta quando ho postato.

**abellos** · 19-04-2016, 14:13

grazie mille ad entrambi, si lo so che e' una porcheria il mio codice, ma devo solamente usarlo una volta per stampare un tot di numeri su etichette e non mi sono sbattuto molto, inoltre non conosco flexbox, mi documentero', grazie ancora

**ResianTaxidrive** · 19-04-2016, 19:19

Ma non era meglio usare un programma di grafica per una cosa del genere? O addirittura un elaboratore testi. Il browser mi sembra una scelta alquanto macchinosa.

**carlomarangoni** · 19-04-2016, 21:18

Originariamente inviata da ResianTaxidrive

Ma non era meglio usare un programma di grafica per una cosa del genere? O addirittura un elaboratore testi. Il browser mi sembra una scelta alquanto macchinosa.

Con un word-processor avrebbe sempre dovuto fare una tabella e formattare il testo per non avere le lettere troppo distanziate con una interlinea singola, mentre con un programma di grafica forse il risultato è migliore ma il tempo di elaborazione e sicuramente molto più lungo

Discussione: Testo in verticale e centrato nella cella

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Testo in verticale e centrato nella cella

Permessi di invio