Ecrire verticallement - Page 1

Bonjour Spipu

J'ai 4 questions :

1/
J'ai recherché sur le forum et dans les exemples comment écrire verticalement mais je n'ai pas trouvé.

Est il possible d'écrire un texte de cette manière ?

2/
pour mes tableaux, j'utilise les mm pour les tailles et pour les bordures j'utilise les px (car même pour la plus petite mesure des mm, c'est bcp trop épais).
Pour une impression en A4, 1 px représente combien de mm ?

3/
Autre méthode de procéder. J'ai mis des marges sur mon fichiers pdf pour faciliter la création des tableaux comme ceci.
$html2pdf = new HTML2PDF( 'L', 'A4', 'fr', array( 24, 10, 24, 7 ) );
Mais quand je fais par exemple :

<page_header>
<table width="100%" align="center" style="border: 1px solid red;">
<tr>
<td width="20%">bla bla bla</td>
<td width="70%">bla bla bla</td>
<td width="10%">bla bla bla</td>
</tr>
<tr>
<td>bla bla bla</td>
<td colspan="2">bla bla bla</td>
</tr>
</table>
</page_header>

Ca me compacte mon tableau alors que j'ai spécifié la taille à 100% de la page.
Est ce normal ?

4/
Je créé un formulaire que les utilisateurs doivent remplir à la main une fois le fichier pdf imprimé.
Pour ce faire, je créé plusieurs lignes avec des <hr> pour qu'ils saisissent les données.
Cependant, je n'ai pas l'impression que mon style soit pris en compte alors que le code css est valide :

<hr style="height: 1px; margin: -0.5em 0; padding: 0; color: #dcdcdc; background-color: #dcdcdc; border: 0;"/>

L'épaisseur est énorme, html2pdf gère-t-il ceci ?

Cordialement

edit : j'utilise la version 3.31.
edit2 : 3/ résolu par style="width: 100%;" puis adaptation des largeurs de colonnes en %

pour ecrire verticalement, regarde les exemples, il y a un exemple avec des divs et la propriété css rotate

concernant les pc et mm, normalement tu peux tout spécifier en mm. Tu n'es pas obligé de mettre des nombres entier, tu peux très bien mettre 0.1mm par exemple

pour les HR, regarde l'exemple 0 qui montre comment les utiliser

Merci pour tes réponses Spipu, je vais voir ça de ce pas !

J'ai essayé pour les <HR>, le seul problème est que la taille mini est 0.1mm et c'est quand même assez épais, tant pis.
Pour le rotate, j'ai un soucis, je fais un rospan sur 3 lignes (toute la hauteur de l'image) et le rotate à l'air de mal passer.

Ci-dessus avec : vertical-align: middle; dans le style du td.

<td style="width: 2%; height: 40mm; background-color: '.$fond_gris_clair.'; font-weight: bold; vertical-align: middle;" rowspan="3"><div style="border: 1px solid red; rotate: 270; text-align: center;">Criticit&eacute;</div></td>

Comment faire pour que ça soit vraiment aligné verticalement ?

Bonjour Spipu,

Je n'ai pas réussi à résoudre le problème d'alignement de mes cellules avec "le rotate" et "le rowspan".
Est ce géré dans la version 3.31 ?

Cordialement

il faut que tu mette un width à ta div, avec un text-align...

Oui oui c'est ce que j'ai fait, le problème est que qu'avec ma div ça agrandit la taille de la colonne qui est à la base de 3% de la taille de ma page (moins les marges).
Et ça je ne sais pas pourquoi !

Le code CSS de la div :

.div-rotate{ width: 75px; text-align: center; padding: 0; margin: 0; rotate: 270; border: 1px solid red; }

Le code HTLML :

<td style="width: 3%; height: 35mm; font-weight: bold; text-align: left; vertical-align: middle;" rowspan="3">
<div class="div-rotate">Criticité</div> </td>

Et ça me donne ça :


On vois bien que la taille et la hauteur de la div est bien plus petite que la largeur de la colonne initiale.
J'ai essayé dans tous les sens, je ne sais pas pourquoi ça créé un espace, alors que la colonne (du dessus) devrait être alignée à celle du dessous. (colonne à gauche des pointillés).
Sans le style "div-rotate" j'ai ça :


Désolé de vous déranger, il doit y avoir quelque chose dans mon code qui agrandi la colonne, mais quoi ?

juste pour tester, si tu agrandis le width de la div, ca élargit encore plus le td ou pas ?

Si j'augmente le width de la div, la hauteur de la colonne augmentera (si elle est supérieur à la valeur définie de la hauteur)
Si j'augmente le height de la div, la largeur de la colonne augmentera.

oui, ca c'est le comportement attendu, mais est-ce que c'est bien ce qui se produit ? (je peux rien tester d'ici)

Ouep c'est ce qu'il se produit réellement.

Mon code HTML :

<table style="width: 100%; margin: auto; font-size: 14px; text-align: center; border: 1px solid black;" cellspacing="0" cellpadding="0"> '
     <tr>
          ...
          <td class="border-droit fond" style="width:  3%; height: 35mm; font-weight: bold; text-align: left; vertical-align: middle;" rowspan="3">
               <div class="div-rotate">Criticité</div>
          </td>
          ...
     </tr>
</html>

Avec ce code CSS :

.div-rotate{ width: 110px; height: 45px; text-align: center; padding: 0; margin: 0; rotate: 270; border: 1px solid red; }

J'ai augmenté le width et le height (avant j'avais juste 75px pour le width et pas de height) et j'obtiens ça :


Mais je comprend pas pourquoi la colonne s'agrandit alors que la div semble plus petite que la largeur de la colonne :s

Up, veux tu tout le codes du tableau Spipu ?

Ben le truc c que j'ai pas trop le temps de bosser sur html2pdf en ce moment... Je te conseille d'essayer de centrer le pb autour du plus petit html possible afin de bien cerner d'ou vient le pb

Bonjour spipu,

J'ai fait des teste avec une petite portion de code, le problème restait le même avec les rowspan et colspan.
Pour contourner le problème, j'ai du fait un padding-left de -x pixel jusqu'à tant que ça soit centré.

Cordialement,