Я пытаюсь добавить удобную для печати функцию в резюме / резюме в Bootstrap 4. Я хотел бы уменьшить расстояние между разделами при печати. Таким образом, с веб-сайта можно распечатать в PDF и преобразовать в текстовый документ.
Мой сайт: https://maschmeyer.ca
Мой GitHub это: https://github.com/sheldonmaschmeyer/website-sheldon
Изменяя файл resume.min.css, у меня есть более удобная для печати страница, но она не совсем верна. Я хочу иметь возможность редактировать веб-сайт и с помощью рендеринга для печати создавать документы в формате PDF и / или Word. Поэтому меньше проблем с обслуживанием (разные версии); Действительно, изменения в LinkedIn и т. Д. Требуют достаточно много времени.
Это то, что я сделал до сих пор:
@media print {
@page {
size: Letter portrait;
margin-top: 1.5cm;
margin-bottom: 1.5cm;
margin-left: 1.5cm;
margin-right: 1.5cm;
}
h1,
h2,
h3,
h4,
h5 {
page-break-after: avoid;
}
section.resume-section {
page-break-before: avoid;
page-break-inside: avoid;
page-break-after: avoid;
}
}
Раздел @page перемещает дату (т. Е. Jane 2014 - январь 2015) с правой стороны при отображении на нижнюю часть подраздела при печати. Это я не хочу.
В каждом разделе слишком много свободного пространства для печати.
Я попытаюсь отрегулировать размеры шрифта после исправления расстояния между разделами.
В идеале, я хотел бы сжать разделы, игнорируя последний раздел, «Услуги», в две страницы при печати.
В заключение ниже приведен скриншот предварительного просмотра. Я хочу уменьшить / удалить расстояние между разделами при печати. Интервал между разделами является фантастическим при просмотре на экране, но не переводится на бумагу. Используемая мной таблица стилей: https://github.com/sheldonmaschmeyer/website-sheldon/blob/master/css/resume.min.css
Скриншот предварительного просмотра в Chrome