Keskustelu: Nettisivujen teko: CSS ja tulostus

Hei,

Olen taistellut viimeaikoina paljon tuloste-editorin kanssa. Olen tehnyt tuloste-editorin, jossa kirjoitettavan tekstin tulisi näkyä kuten tulostuu. Ongelmani on se, etten saa Chromen tulostuksen ja oman contenteditable-divin sisältöä vaihtamaan sivua samassa kohtaan. Olen saanut kiteytettyä ongelman siihen, että kun asetan sivulle marginin, niin Chromen tulostusikkuna skaalaa muuta sisältöä pienemmäksi. Asetan marginin näin:

@page{
		margin: 10mm;
		size: A4 portrait;
}

Tein tulosteelle testineliön, jonka koko on 30mm*30mm. Tässä kuvassa näkyy ero. Pienempi neliö on tulostettu siten, että margin: 10mm(@page), padding: 0 (div), isompi on tulostettu siten, että margin: 0mm(@page), padding: 10mm (div).

Silloin kun margin on nolla ja divillä on padding: 10mm, tuloste ja divin sisältö täsmää, mutta kun margin on 10mm ja padding 0, ne eivät täsmää. Voisin muuten käyttää tuota paddingia, mutta silloin sivun vaihdon yhteydessä ei tule tyhjää tilaa sivuille.

Tässä vielä fiddle aiheesta.

Onko jotakin keinoa, jolla voisi estää tuon skaalauksen tai tapaa kiertää tämä ongelma?

Jos haluat päästä kiinni miten elementti suhtautuu sivunvaihtoihin, voit myös hyödyntää page-breakiä:

page-break-before: https://www.w3schools.com/cssref/pr_print_pagebb.asp
page-break-after: https://www.w3schools.com/cssref/pr_print_pageba.asp
page-break-inside: https://www.w3schools.com/cssref/pr_print_pagebi.asp