Формат HTML для размещения двух столбцов для печати ⇐ CSS

[Anonymous]

У меня есть текст с главами в формате HTML, и я хотел бы использовать его для печатных СМИ в макете с двумя столбцами, см. рисунок:


Мой HTML и CSS выглядят так:
< div class="snippet">

Код: Выделить всё

@media print {
@page {
size: a4;
margin: 3cm 1.5cm;
}

.work {
font-family: 'ITC Giovanni Std', sans-serif;

h1 {
font-weight: bold;
margin-bottom: 0.25cm;
}

.work-title {
margin-bottom: 2cm;

hr {
width: 2cm;
opacity: 0.5;
border: 0;
border-top: 1px solid;
color: inherit;
margin: 1rem 0;
}
}

.work-content {
column-count: 2;
column-gap: 1em;
column-span: all;
column-width: auto;
text-align: justify;
hyphens: auto;
word-break: break-word;
font-size: 12pt;
line-height: 1.25em;

.chapter {
margin-bottom: 1cm;
.chapter-number {
font-size: 2.25rem;
font-weight: bold;
}
}
}
}
}

Код: Выделить всё

Lorem Ipsum



1
Lorem ipsum ...

2
Lorem ipsum ...

3
Lorem ipsum ...

4
Lorem ipsum ...

5
Lorem ipsum .

Проблема, с которой я столкнулся, — это небольшой шаг, который отображается во втором столбце. :


Я понимаю, что это связано с номером главы. Но как мне сделать так, чтобы текст был на одной высоте? Что я уже обнаружил, так это то, что я могу установить высоту строки на 0 для .chapter-number:

Код: Выделить всё

.chapter-number {
font-size: 2.25rem;
font-weight: bold;
line-height: 0;
}

Тогда подходит:


Тогда (но также и в целом) я сталкиваюсь с проблемой: если номер главы находится в начале страницы, он переходит на предыдущую страницу:


Какие параметры мне нужно изменить, чтобы достичь цели?

Подробнее здесь: https://stackoverflow.com/questions/792 ... r-printing