Tisk CSS styly, na které jsem zapomněl. Konec stránky pro tisk pomocí CSS3 Tisk URL odkazů

Jak se vypořádat s konce stránek při tisku velké HTML tabulky (8)

Mám projekt, který vyžaduje tisk HTML tabulky s mnoha řádky.

Můj problém je v tom, jak se tabulka tiskne na více stránek. Někdy přeřízne řádek na polovinu, takže je nečitelný, protože jedna polovina je na okraji stránky a zbytek je vytištěn v horní části další stránky.

Jediné přijatelné řešení, které mě napadá, je použít složité DIV místo tabulky a v případě potřeby vynutit zalomení stránek... ale než projdu všemi změnami, myslel jsem si, že bych se zde mohl zeptat dříve.

Použijte tyto vlastnosti CSS:

Page-break-after page-break-before

Například:

@media print ( tabulka (page-break-after:always) ) ....

Žádná z odpovědí zde pro mě v Chrome nefungovala. AAverin na GitHubu pro to vytvořil užitečný Javascript a fungovalo to pro mě:

Stačí přidat js do svého kódu a přidat do tabulky třídu splitForPrint a tabulka úhledně rozdělí na více stránek a na každou stránku přidá záhlaví tabulky.

Poznámka: Při použití konce stránky: vždy pro značku vytvoří konec stránky za posledním kouskem tabulky a pokaždé vytvoří zcela prázdnou stránku! Chcete-li to vyřešit, jednoduše jej změňte na page-break-after: auto. Správně se zlomí a nevytvoří další prázdnou stránku.

@media print ( table ( page-break-after:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) td ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....

Přijatá odpověď pro mě nefungovala ve všech prohlížečích, ale po css mi fungovalo:

Tr ( display: table-row-group; page-break-inside:varoid; page-break-after:auto; )

Struktura HTML byl:

...

V mém případě došlo k dalším problémům s thead tr , ale to vyřešilo původní problém s omezením řádků tabulky.

Kvůli problémům se záhlavím jsem skončil s:

#theTable td * ( page-break-inside:avoid; )

To nezabránilo lámání řad; pouze obsah každé buňky.

Skončil jsem u přístupu @vicenteherrera s některými vylepšeními (což může být bootstrap 3).

V podstatě; nemůžeme přerušit tr s nebo td s, protože to nejsou prvky na úrovni bloku. Do každého tedy vložíme div s a na divy aplikujeme naše pravidla page-break-*. Zadruhé přidáme do horní části každého z těchto divů nějaké vycpávky, abychom kompenzovali jakékoli stylingové artefakty.

@media print ( /* vyvarujte se řezání tr"s na polovinu */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zabalte každý obsah tr a td do prvku div // (todo: přidejte logiku, takže to uděláme pouze při tisku) $("table tbody th, table tbody td").wrapInner(" ");))

Opravy a úpravy přídavků byly nutné pro kompenzaci nějakého jitteru, který byl zaveden (předpokládám z bootstrapu). Nejsem si jistý, zda uvádím nové řešení z ostatních odpovědí na tuto otázku, ale třeba to někomu pomůže.

Nedávno jsem tento problém vyřešil dobrým řešením.

AvoidBreak ( okraj: 2px plné; page-break-inside:avoid; )

Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Funguje jako kouzlo!

Testoval jsem mnoho řešení a žádné nefungovalo dobře.

Tak jsem zkusil malý trik a funguje to:

chodidlo se stylem: poloha: pevná; dole: 0px; poloha: pevná; dole: 0px; je umístěn na konci poslední stránky, ale pokud je zápatí příliš vysoko, překrývá obsah tabulky.

tfoot only with: display: table-footer-group; nepřekrývá se, ale není na konci poslední stránky...

Položme dvě nohy:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) zde váš dlouhý text nebo vysoký obrázek

Jedna si vyhrazuje místo na jiných než posledních stránkách, druhá ve vašem osobním zápatí.

Testovací tabulka ( page-break-inside:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

nadpis

poznámky

Jak se vypořádat s konce stránek při tisku velké HTML tabulky (8)

Mám projekt, který vyžaduje tisk HTML tabulky s mnoha řádky.

Použijte tyto vlastnosti CSS:

Page-break-after page-break-before

Například:

@media print ( tabulka (page-break-after:always) ) ....

Žádná z odpovědí zde pro mě v Chrome nefungovala. AAverin na GitHubu pro to vytvořil užitečný Javascript a fungovalo to pro mě:

Stačí přidat js do svého kódu a přidat do tabulky třídu splitForPrint a tabulka úhledně rozdělí na více stránek a na každou stránku přidá záhlaví tabulky.

Přijatá odpověď pro mě nefungovala ve všech prohlížečích, ale po css mi fungovalo:

Tr ( display: table-row-group; page-break-inside:varoid; page-break-after:auto; )

Struktura html byla:

...

V mém případě došlo k dalším problémům s thead tr , ale to vyřešilo původní problém s omezením řádků tabulky.

Kvůli problémům se záhlavím jsem skončil s:

#theTable td * ( page-break-inside:avoid; )

To nezabránilo lámání řad; pouze obsah každé buňky.

Skončil jsem u přístupu @vicenteherrera s některými vylepšeními (což může být bootstrap 3).

Nedávno jsem tento problém vyřešil dobrým řešením.

AvoidBreak ( okraj: 2px plné; page-break-inside:avoid; )

Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Funguje jako kouzlo!

Testoval jsem mnoho řešení a žádné nefungovalo dobře.

Tak jsem zkusil malý trik a funguje to:

chodidlo se stylem: poloha: pevná; dole: 0px; poloha: pevná; dole: 0px; je umístěn na konci poslední stránky, ale pokud je zápatí příliš vysoko, překrývá obsah tabulky.

tfoot only with: display: table-footer-group; nepřekrývá se, ale není na konci poslední stránky...

Položme dvě nohy:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) zde váš dlouhý text nebo vysoký obrázek

Jedna si vyhrazuje místo na jiných než posledních stránkách, druhá ve vašem osobním zápatí.

Testovací tabulka ( page-break-inside:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

nadpis

poznámky

Tento tweet mě dostal. Najednou jsem si uvědomil, že si už nepamatuji, kdy jsem optimalizoval webové stránky pro tisk nebo dokonce kontroloval, jak byly vytištěny na tiskárně.

Hlavním zaměřením vývoje webu je elektronické verze stránky. Stránky se musí kontrolovat ve více prohlížečích, testovat na různých velikostech oken... Koho zajímají tiskárny? Nebo jsem možná zapomněl na styly tisku, protože papírové kopie stránek sám dělám jen zřídka. Ať je to jakkoli, cítil jsem, že situaci je naléhavě potřeba napravit.

Tištěná verze webové stránky má stejné právo na existenci jako elektronická verze. A pokud se snažíme, aby naše materiály byly co nejpřístupnější, neměli bychom zanedbávat papírová média. Kromě toho byste neměli vytvářet domněnky o uživatelích a jejich chování. Lidé stále tisknou webové stránky na tiskárnách. Jen si vzpomeňte na články nebo blogové příspěvky, stránky s recepty, kontaktní informace, pokyny nebo seznamy. Dříve nebo později se jistě někdo pokusí vytisknout něco, co jste umístili na internet.

Zde je to, co o tom říká Haydon Pickering, autor knihy „Inclusive Design Patterns“: „Domácí tiskárny už dlouho nepoužívám. Tady jde o to, že mám pocit, že se rozbijí asi deset minut po zahájení tisku. Ale nejsem všechno."

Pokud si nyní uvědomujete, že jste stejně jako já nevěnovali dostatečnou pozornost stylům tisku, doufám, že vám můj příběh dobře poslouží a pomůže vám rychle osvěžit paměť. A pokud jste nikdy neoptimalizovali webové stránky pro tiskárny, moje malá sbírka užitečných CSS triků vám pomůže začít.

1. Použití stylů tisku CSS Nejlepší způsob, jak začlenit styly tisku do vaší stránky, je deklarovat pravidlo @media v hlavním souboru CSS.

Body ( font-size: 18px; ) @media print ( /* styly tisku budou zde */ body ( font-size: 28px; ) )
Případně můžete styly tisku vložit do samostatného souboru a zahrnout jej do HTML, ale s tímto přístupem budete při načítání stránky potřebovat další požadavek.

2. Testování Jak hodnotit vzhled webová stránka připravená k tisku? Každému je jasné, že dát to na papír po každé změně stylu ne Nejlepší rozhodnutí. Naštěstí jsou možnosti prohlížeče pro „bezpapírovou“ kontrolu tištěných verzí stránek zcela dostatečné.

V závislosti na prohlížeči můžete stránku exportovat do PDF, použijte funkci náhled nebo dokonce ladit stránku přímo ve webovém prohlížeči.

Chcete-li ladit styly tisku ve Firefoxu, otevřete Panel vývojáře pomocí klávesové zkratky Shift + F2 nebo spuštěním příkazu nabídky Vývoj → Panel vývojáře. Vstupte příkazový řádek ve spodní části okna: media emulate print , zadání dokončete stisknutím klávesy Enter . Aktivní karta se bude chovat, jako by byl její typ média vytištěn, dokud stránku nezavřete nebo neobnovíte.

Emulace tisku ve Firefoxu

Podobnou funkci má také Chrome. Otevřete Nástroje pro vývojáře, pro které můžete v systému MacOS použít kombinaci kláves CMD + Opt + I, ve Windows - Ctrl + Shift + I nebo spustit příkaz nabídky Další nástroje→ Vývojářské nástroje. Poté otevřete panel renderování. Jedním ze způsobů, jak toho dosáhnout, je stisknutím klávesy Esc vyvolat panel Console a poté pomocí nabídky otevřít panel Rendering. V panelu vykreslování nastavte příznak Emulovat média CSS a vyberte Tisk.

Emulace tisku v Chrome

Více o testování tištěných verzí webových stránek si můžete přečíst na StackOverflow.

3. Absolutní jednotky měření Absolutní jednotky měření nejsou příliš vhodné pro obrazovkové verze stránek, ale pro tisk jsou přesně to, co potřebujete. V tiskových stylech je to zcela bezpečné, navíc se doporučuje používat absolutní jednotky měření jako cm, mm, in, pt nebo pc.

Sekce (okraj-dole: 2 cm; )

4. Vlastnosti stránky Pravidlo @page můžete použít k řízení vlastností stránky, jako je její velikost, orientace a okraje. To se velmi hodí, řekněme, když potřebujete, aby všechny vytištěné stránky měly stejné okraje.

@media print ( @page (okraj: 1 cm; ) )
Pravidlo @page je součástí standardu Paged Media Module, který nabízí spoustu skvělých věcí, jako je výběr první stránky k tisku, přizpůsobení prázdné stránky, polohovací prvky v rozích stránky a . Může být dokonce použit k přípravě knih pro tisk.

5. Správa zalomení stránek Vzhledem k tomu, že tištěné listy na rozdíl od webových stránek nejsou nekonečné, obsah webových stránek se dříve či později odlomí na jeden list papíru a pokračuje na dalším. Existuje pět vlastností pro ovládání zalomení stránky: Konec stránky před prvkem Pokud chcete, aby se prvek vždy objevil na začátku stránky, můžete vynutit konec stránky před ním pomocí vlastnosti page-break-before.

Sekce ( page-break-before: always; )

▍Konec stránky po prvku Vlastnost page-break-after umožňuje nastavit vynucený konec stránky po prvku. Pomocí této vlastnosti můžete také zabránit rozbití.

H2 ( zalomení stránky za: vždy; )

▍Přerušení stránky uvnitř prvku Vlastnost page-break-inside je velmi užitečná, pokud se potřebujete vyhnout rozdělení prvku mezi dvě stránky.

Ul ( page-break-inside: avoid; )

▍Horní a dolní visící řádky Někdy nemusíte vynucovat zalomení stránek, ale chcete ovládat výstup odstavců na hranicích stránky.

Pokud se například poslední řádek odstavce na aktuální stránce nevejde, poslední dva řádky tohoto odstavce se vytisknou na další stránku. Je to proto, že vlastnost, která to řídí (vdovy, tj. „horní zavěšené řady“), je ve výchozím nastavení nastavena na 2. Toto lze změnit.

P (vdovy: 4; )
Pokud nastane jiná situace a na aktuální stránku se vejde pouze jeden řádek odstavce, vytiskne se celý odstavec na další stránku. Vlastnost zodpovědná za spodní závěsné čáry (sirotci) je také standardně nastavena na 2.

P(sirotci: 3;)
Smyslem výše uvedeného kódu je, že aby se celý odstavec nezalomil na další stránku, musí se na aktuální stránku vejít alespoň tři řádky.

Abyste tomu lépe porozuměli, podívejte se na příklad připravený pomocí CodePen. A zde je ladicí verze stejného příkladu, je pohodlnější otestovat.

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( pozadí: průhledné !důležité; barva: #000 !důležité; stínovaný rámeček: žádný !důležitý; stín textu: žádný !důležitý; )
Mimochodem CSS styly pro tisk jsou jednou z mála výjimek, kde je direktiva!important naprosto normální ;)

7. Odstranění nepotřebného obsahu Abyste neplýtvali inkoustem, měli byste z tištěné verze stránky odstranit vše nepotřebné, jako jsou obrovské krásné diapozitivy, reklama, navigační nástroje na webu a podobně. To lze provést nastavením vlastnosti display na hodnotu none pro nepotřebné prvky. Je docela možné, že zjistíte, že je správné zobrazit pouze hlavní obsah stránky a skrýt vše ostatní:

Tělo > *:not(hlavní) (zobrazit: žádné; )

8. Zobrazování adres odkazů Odkazy, jak se obvykle nacházejí na webových stránkách, jsou při tisku zcela zbytečné, pokud čtenář papírové verze dokumentu neví, kam vedou.

Chcete-li zobrazit adresy odkazů po jejich textových reprezentacích, použijte následující styl:

A:after ( content: " (" attr(href) ")"; )
S tímto přístupem bude samozřejmě „rozluštěno“ mnoho nepotřebných věcí. Například relativní odkazy, absolutní odkazy na stejném webu jako tištěná stránka, kotvící odkazy a tak dále. Aby nebyla tištěná stránka nepořádek, bylo by lepší použít něco takového:

A:not():after ( content: " (" attr(href) ")"; )
Vypadá to šíleně, samozřejmě. Takže vysvětlím význam tohoto pravidla v jednoduché angličtině: "U každého odkazu, který má atribut začínající http, ale neobsahuje mywebsite.com, zobrazte hodnotu atributu href."

9. Vysvětlení zkratek Zkratky v textu musí být umístěny v tagu a jejich vysvětlivky musí být uvedeny v atributu title. Pokud zkratky naformátujete tímto způsobem, jejich význam se velmi snadno zobrazí na vytištěné stránce:

Abbr:after ( content: " (" attr(title) ")"; )

10. Vynucený tisk pozadí Obvykle prohlížeče při vytváření stránky pro tisk nezobrazují barvu pozadí a obrázky na pozadí, pokud to výslovně neuvádějí. To vše je však někdy potřeba vytisknout. Zde nám pomůže nestandardizovaná vlastnost print-color-adjust, která umožňuje u některých prohlížečů přepsat výchozí nastavení.

Záhlaví ( -webkit-print-color-adjust: přesné; print-color-adjust: přesné; )

11. Dotazy na média Pokud píšete dotazy na média, jako je ten níže, mějte na paměti, že pravidla CSS podobné žádosti neovlivní tištěnou verzi stránky.

@media screen and (min. šířka: 48em) ( /* pouze obrazovka */ )
proč tomu tak je? Jde o to, že pravidla CSS se použijí pouze v případě, že hodnota min-width je 48 em a pokud je typ média screen . Pokud se zbavíte tohoto mediálního dotazu z klíčové slovo screen , pak bude omezena pouze hodnotou min-width.

@media (min-width: 48em) ( /* všechny typy médií */ )

12. Tisk map Aktuální verze Firefoxu a Chrome umí tisknout mapy, ale například Safari to neumí. Co dělat při tisku karet? Jednou z univerzálních možností je použití statických map místo dynamických.

Mapa ( šířka: 400px; výška: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh "); -webkit-print-color-adjust: přesné; print-color-adjust: přesné; )

13. QR kódy Tisk QR kódů obsahujících důležité odkazy může výrazně zlepšit použitelnost papírových verzí webových stránek. Zde je kousek z The Smashing Magazine, kde najdete Užitečné tipy o tomto tématu. Jedním z nich je uvedení jejich adresy ve formě QR kódů na tištěné stránky. V důsledku toho uživatel, aby v prohlížeči otevřel stránku, ze které byl výtisk vytvořen, nebude muset zadávat její úplnou adresu na klávesnici.14. O tisku neoptimalizovaných stránek Při zkoumání tématu tisku webových stránek jsem zjistil skvělý nástroj, který umožňuje pohodlně připravit neoptimalizované stránky k tisku. Pomocí Printliminatoru