Firefox Проблемы с масштабированием и вращением CSS

Question

У меня есть генератор карт для игры в гольф.Структурно у страницы есть div класса .printarea, обертывающий таблицу шириной 1072 пикселя.

Я постепенно получаю ее, поэтому печать представляет одну страницу в альбомной ориентации во всех основных браузерах.если вращение и масштаб указаны в BODY, то масштаб не работает.Поэтому я переместил ротацию в DIV, содержащую все остальное.Это привело к повороту, но сместило таблицу так, что некоторые обрезки происходят справа (снизу таблицы) и сверху (справа от таблицы).

Я попытался исправить это с помощью полей и абсолютного позиционирования, но это привело кв маленьких разрозненных кусочках стола шунтировали на вторую страницу.Уменьшение масштаба даже до крошечных пропорций никогда не разрешает размещение второй страницы.

Играя с настройками оригинала, я в итоге получаю position:absolute; -moz-transform-origin: 400px 900px; Это теряет часть верхней части таблицы (левая сторона страницы) и смещает последние двастроки, несмотря на то, что ножка стола (правая сторона страницы) легко находится в 3 дюймах от края бумаги.Уменьшение даже до крошечных пропорций не исправляет смещение.

Вот статическая копия одной карты: http://egolfplan.com/example.html

В конце поста я добавлю скриншоты PDF-файлов из печати.

Текущий CSS

<style type="text/css" media="print">
    BODY {
        width:100%;
        height:100%;
        -webkit-transform: rotate(-90deg) scale(.68,.68); 
        -moz-transform:scale(.48,.48);
         zoom: 60%;
    }
    .printarea {
        width:100%;
        height:100%;
        -moz-transform:rotate(-90deg);
    }
    @page {margin: 0;}

 </style>

Масштабируется до 68%

Масштабируется до 48%

-moz-transform-origin: 400px 900px;

Answer 1

Поскольку вы должны использовать определенные свойства вендора, и они будут отображаться по-разному, я предлагаю вам использовать CSSSandpaper. Эта статья говорит о вашей необходимости: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Answer 2

Firefox, по-видимому, определяет разрывы страниц для печати ДО применения таблицы стилей печати. В результате преобразование масштаба применяется к каждой напечатанной странице, а не к основному блоку в целом.

Answer 3

В целом, я считаю, что поворот с помощью CSS ненадежен, учитывая различные реализации браузера, особенно в вашем случае, поскольку вы используете свойства браузера.

Я бы сделал одно из следующих действий.

1. Используйте надежную библиотеку JavaScript, такую ​​как jQuery Rotate (http://code.google.com/p/jquery-rotate/) вместо CSS.

2. Напишите немного код на стороне сервера, который на самом деле генерирует изображение этой оценки карта, которую можно легко масштабировать или поворачивать. PhP может сделать это, например.

3. Измените свой дизайн на избегайте вертикального текста.

Answer 4

В итоге мы использовали Browshot.com для рендеринга каждой карты в виде скриншота в формате JPEG и отправки ее пользователю для загрузки.