Предварительный просмотр squishing content

Question

Я пытаюсь получить предварительный просмотр для печати для меня таким образом, что я хочу, чтобы он использовал директиву @page в CSS. По какой-то причине, независимо от того, на каком значении поля моей страницы, содержимое обмахивается, даже если цифры предположительно точны. Вот пример для проверки:

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

Если открыть предварительный просмотр печати на этой странице (я тестирую в хроме), вы увидите, что карты дико от центра. Вот что, однако - мои карты установлены на 2.5in на 3.5in, а сама страница установлена ​​на 8.5in на 11in. Это означает, что я должен иметь примерно 1 дюйм поля между левым и правым и 0.5in margin сверху и снизу, то есть логически мои поля должны быть уменьшены вдвое для каждой стороны. Однако, если я на самом деле сделать это, это выглядит сплющенные:

Вот мой @page CSS:

@media print { 
    html, body, .printable, .results-pane, .embed-view { 
     width: 8.5in !important; 
     height: 11in !important; 
    } 

    @page { 
     size: 8.5in 11in; 
     margin-top: 0.25in; 
     margin-left: 0.5in; 
     margin-right: 0.5in; 
     margin-bottom: 0.25in; 
    } 
    } 

Проблема существует, даже если я пытаюсь установить поля вручную, и с этим вы даже можете видеть, что мой контент сжимается. Вот как это выглядит с абсолютно без полей (покидающих 1в и 0.5in поля доступны:

А вот как это выглядит, когда я установить отступы себя:

Есть способ, которым я могу либо запретить браузеру выполнять это скремблирование, или использовать мой запрос @print, чтобы исправить это. Для справки я попытался установить поля на самом теле, но верхние и нижние поля не будут сохраняться на нескольких печатные страницы

Answer 1

Как назло, это на самом деле проблема с первым запросом СМИ:

html, body, .printable, .results-pane, .embed-view { 
    width: 8.5in !important; 
    height: 11in !important; 
} 

Поскольку они все время установлены одинаковые размеры, они выталкивают друг друга. Разрешение состояло в том, чтобы просто сделать html правильной шириной/высотой, и все сорта встала на свои места оттуда.

Answer 2

Возможно ли, что избыточная скобка закрывает ваш css?

@page { 
    size: 8.5in 11in; 
    margin-top: 0.25in; 
    margin-left: 0.5in; 
    margin-right: 0.5in; 
    margin-bottom: 0.25in; 
} 

}/* < - дополнительный кронштейн */