CSS3 для печатных СМИ

Question

CSS3 для печатных СМИ

0

Я пытаюсь создать страницу (статический html, некоторые части, сгенерированные с помощью php) для вывода PDF-печати.

Вот CSS, характерный для печатной версии страницы. Существуют и другие правила форматирования, но они не находятся в теге @media print:

@media print {
    @page {
        @top-right {
            content: "99999999 | L.L.O.";
        }
        orphans: 4;
        widows: 3;

    }

    @page:margin {
        margin: 2cm;
    }

    @page :first {
        margin-top: 10cm;
    }

    @page :left {
        margin-left: 3cm;
        margin-right: 2cm; 
    }

    @page :right {
        margin-left: 2cm;
        margin-right: 3cm;
    }

    div.divHeader {
        position: fixed;
        padding-bottom: 30px;
        top: 0;
        text-align: right;
        float: right;
    }

    .do_not_print {
        display: none;
    }
}

Эти стили дают разные результаты для каждой породы браузера:

Safari в OS X (WebKit): игнорирует все правила @page, частично отображает divHeader, но только на первой странице, и не отображает команды выравнивания текста, заполнения или поплавка, отображает "разрывы страниц" на divs
Firefox на OS X (Gecko): похож на Safari, но делает divHeader на всех страницах
Opera на OS X (Presto): отображает команды по маркам !, отображает divHeader на случайных страницах (но не на компонентах дополнения), но печатает только первые 4 страницы (из 14!)
IE на ПК (Trident): в основном рендеринг маржи (кроме margin-top), только печатает первые две страницы, но накладывает отдельные div файлы после первой страницы, печатает головки и также позиционирует их части

Я действительно надеюсь, что вы найдете ошибку в моем коде...

Спасибо, что посмотрели!

Levi 19 окт. 2013, в 16:11

Источник

Теги:

html

css

css3

printing

pdf

1 ответ

Ещё вопросы

Levi · Answer 1 · 2013-10-19T13-58-00.000Z

Немного изменив несколько аспектов кода, можно было оптимизировать вывод для Firefox. Safari, Opera и IE по-прежнему вялые. Safari/WebKit имеет некоторые ошибки, из-за которых невозможно отобразить бегущую голову. Может быть возможно настроить этот css для Opera и IE.

@media print {

    @page {
        margin: 2cm;
        orphans: 5;
        widows: 5;
    }

    .title {

        margin: 10cm 0 0 0;
        page-break-after: always;
        display: block;

    }


    div.divHeader {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        margin: 10px;
    }

    img {

        max-width: 98% !important;
        page-break-inside: avoid;

    }

    .do_not_print {
        display: none;
    }
}