Impression HTML avec des positions absolues

Malheureusement, le CSS3 Module: Paged Media permet à tout cela d'arriver. Ce sont les règles concernant les pages qui sont trop grandes:

3.3.3. Rendre les boîtes de page qui ne correspondent pas à une feuille de page

si une zone de page ne correspond pas aux dimensions de la feuille de la page cible, l'agent utilisateur peut choisir (par ordre de préférence) de:

• afficher la boîte de page au format indiqué sur une feuille plus grande.
• faire pivoter la case de la page de 90 ° si cela permet d'adapter la case de la page à la feuille.
• graduer la boîte de la page pour qu'elle corresponde à la feuille de la page. (Il n'est pas nécessaire de maintenir le format de la page ou de tout élément sur la page lors de la mise à l'échelle; toutefois, il est préférable de conserver le format de la page.) [terminé par Chrome]
• reformater le contenu de la page, y compris le "débordement" sur d'autres feuilles. [terminé par de nombreux autres ou les anciens navigateurs]
• Clip débordé contenu (moins pratique).

l'agent utilisateur devrait consultez l'utilisateur avant d'effectuer ces opérations.

3.3.4. Positionnement de la boîte de page sur la feuille

lorsque la boîte de page est plus petite que la taille de la page, l'agent utilisateur devrait centrez la case de la page sur la feuille car cela alignera les pages recto verso et évitera la perte accidentelle d'information qui est imprimé sur le bord de la feuille.

Et c'est la règle qui rompt tous vos positioned trucs:

3.7. Contenu à l'extérieur de la boîte de la page

[...] Aussi, quand les boîtes sont positionnées absolument, elles peuvent finir dans des endroits "incommodes". Par exemple, des images peuvent être placées sur bord de la boîte de la page. De même, lorsque les cases utilisent fixe ou relatif positionnement, ils peuvent aussi se retrouver en dehors de la page boîte.

une spécification pour le formatage exact de tels éléments se trouve à l'extérieur la portée de ce document. Toutefois, nous recommandons que les auteurs et les agents utilisateurs observent les principes généraux suivants: contenu à l'extérieur de la boîte de la page:

• les agents utilisateurs doivent éviter de générer un grand nombre de boîtes de page vides pour honorer le positionnement des éléments (par exemple, vous ne voulez pas imprimer 100 pages vierges). Notez, cependant, que la génération d'un petit nombre des cases vides peuvent être nécessaires pour honorer la "gauche" et la "droite" les valeurs de 'page-break-before' et 'page-break-after'.
• les auteurs ne doivent pas placer des éléments dans des endroits incommodes juste pour éviter de les rendre. Plutôt:
  • pour supprimer entièrement la génération de boîtes, définissez la propriété 'display' à'none'.
  • pour rendre une boîte invisible, définissez la propriété 'visibility'.
• les agents utilisateurs peuvent manipuler des boîtes placé en dehors de la boîte de page de plusieurs façons, y compris les jeter ou créer des boîtes de page pour à la fin du document.

consultez le deuxième paragraphe de la section 3.7: la spécification du formatage exact de ces éléments n'entre pas dans le cadre du présent document. Puisqu'il n'y a pas d'autre document et aucune autre ligne directrice alors le principe général suivant ce paragraphe, chaque navigateur peut faire tout ce qu'il vouloir.

C'est l'un des défauts qui sont actuellement dans ce module CSS3. Cependant, je pense que ces défauts ne peuvent pas être éliminés par un css4 ou un module CSS3 révisé, car la variété des feuilles de style possibles et des mises en page qui en résultent est trop énorme trop de couverture. Notez aussi un peu note de bas de page figurant dans le profil D'impression CSS:

‡ l'imprimante peut ignorer les éléments positionnés qui sont placés sur la page avant la position de l'élément courant dans le flux normal.

il n'est donc pas possible de créer le même effet dans chaque navigateur. Pour le moment, le seul moyen de réaliser un document portable est de créer un PDF avec une application tierce ou via une imprimante PDF et votre navigateur préféré. Tout autre moyen est voué à l'échec tant que les recommandations du W3C ne sont pas strictes ou que les fournisseurs de navigateur mettent en œuvre ce qu'ils veulent.

Voir aussi:

• CSS3 Module: Paginé De Médias (projet de Travail, de la dernière révision 2006)
• CSS Profil d'Impression (projet de Travail, de la dernière révision 2006)

notes supplémentaires

Si vous avez un tas de position:absolute éléments qui doivent être imprimés il est parfois bon de se demander si un élément doit être positionné absolu, ou si le même effet peut être obtenu d'une manière légèrement différente ou plus facile. Notez également que vous devez utiliser display:none sur chaque élément qui n'est pas vraiment nécessaire pour les médias imprimés, tels que des publicités, des navigations, etc...

Comme vous le dites, les navigateurs web ont tendance à faire des choses folles lors de l'impression. Les moteurs imprimés sont souvent meilleurs.

WeasyPrint est un open-source moteur qui rend au PDF et soutient le positionnement absolu aussi bien que CSS 3 média paginé pour définir les marges de page:

@page { margin: 1cm /* or 0, if you want */ }

j'ai testé le statut du navigateur pour l'impression des éléments "position: absolute" avec les résultats suivants:

• IE 11: échec. N'importe quel système d'exploitation, 7,8,8.1.
• IE 10: Passe. Cependant, vous ne pouvez pas revenir à 10 sur 8.1 de sorte que les gens avec qui sont coincés.
• Firefox jusqu'à 38.05 = échec. Inconnu si une version a déjà fonctionné.

la bonne nouvelle est qu'il semble que les gens de Blink / WebKit ont fait leurs devoirs au lieu d'utiliser des code.

• Chrome: Pass
• Opéra: Pass

Faites votre conteneur pour avoir une position relative. C'est la seule façon de garder les éléments absolument positionnés au même endroit à chaque écran et papier. ainsi, si votre div principal (le div où tout votre contenu est situé) Ajoute ce qui suit à votre css:

#maindivname{position:relative;}

Devrait faire l'affaire.

les requêtes des médias feront l'affaire -- vérifiez ce lien et la question précédente, peut-être que cela vous aidera. Suggestions pour déboguer les feuilles de style d'impression?

requête de médias de transition de px en pouces / cm / tout ce qui est nécessaire pour les besoins d'impression.

cette bordure / marge que vous avez mentionnée est probablement la zone imprimable de votre imprimante (le bord de prise). La plupart des imprimantes ont besoin d'un certain type de bord pour saisir et alimenter le stock. C'est pour ça que quand on imprime un document à fond perdu (encre sur le bord), il est imprimé en stock plus grand que nécessaire, puis paré vers le bas.

définir la marge avec la configuration de la page est la première et principale solution pour imprimer le HTML page ou un DIV .

Après tout pas le résultat attendu viendra alors vous avez besoin de quelques fouilles sur votre HTML page.

créer une fenêtre sans barre de titre ou toute barre personnalisée en utilisant le script java.Et mettez toutes les données originales dans cette fenêtre avec un position:relative et définissez aussi le type de média comme imprimé.

position:relative;
media:print;

l'Espoir qu'il sera utile.