2015-03-29 5 views
0

Я делаю небольшую книгу (~ 20 страниц). Но уловка заключается в том, что я хочу показать один и тот же контент на веб-сайте. Итак, вместо того, чтобы делать веб-сайт и книгу в двух специальных форматах (веб-сайт в формате HTML, книга в MS Word/Adobe pdf), я решил пойти в одном формате: HTML + CSS. Это делает все намного проще. Я хочу разместить границу на каждой печатной странице. Как в старых средневековых книгах. Для этого я использую правило border-image, и он отлично работает.На странице border-image in pure CSS

 article 
 
    { 
 
     border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 27 round; 
 
     -moz-border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 27 round; 
 
     border-style: solid; 
 
     border-width: 9px; 
 
     box-sizing: border-box; 
 
     -webkit-box-decoration-break: clone; 
 
     box-decoration-break: clone; 
 
    }
<html> 
 
     <body> 
 
      <section> 
 
       <article> 
 
        <h1>The chapter title</h1> 
 
        <p>text</p> 
 
        <p>text</p> 
 
        <p>...</p> 
 
       </article> 
 
       <article> 
 
        <h1>The chapter title</h1> 
 
        <p>text</p> 
 
        <p>text</p> 
 
        <p>...</p> 
 
       </article> 
 
       <article>next chapter...</article> 
 
      </section> 
 
     </body> 
 
    </html>

При использовании веб-версии все в порядке. При попытке печати граница изображения будет нарушена. Когда вы смотрите на box-decoration-break, - это два примера: для значения «срез» и для «клона». Я хочу, чтобы мой результат выглядел как «clone», но вместо этого у меня есть результат «slice».

http://dev.w3.org/csswg/css-break-3/#break-decoration

+0

У вас также возникнут проблемы с этим подходом. Просто потому, что html совсем не подходит для макета печати. Я предлагаю вам использовать нейтральную базу для этого, чтобы написать контент в (источники LaTeX или DocBook), а затем использовать процессор для создания целевых форматов. – arkascha

+0

Это небольшой проект. Я не хотел использовать очень сложный построенный процесс, который сделает все необходимые преобразования. Таким образом, HTML кажется очевидным выбором. Помимо этой проблемы, я очень доволен тем, как можно печатать HTML. –

+0

OK, ваше решение. Хотя конвертирование LaTeX обычно сводится к нажатию кнопки «конвертировать» ... В любом случае вам нужно понять, что html просто не знает, что такое «страница». Это не ориентированная на печать разметка. Нет никаких реальных средств контроля за разбиением на страницы. Таким образом, вы должны использовать абсолютные измерения в своих правилах стиля и управлять тем, что контент действительно подходит ... По крайней мере, css позволяет вам определять отдельные правила стилизации для отдельных целевых «медиа». Это задокументировано, это может помочь в решении вопроса о границе. Вероятно, вам нужен div для каждой страницы с правилом стиля рамки ... – arkascha

ответ

0

я думаю, что если этот флажок в окне печати можно правильно напечатать страницу: The Image Link

+0

Не существует корреляции между этими флажками и моими отсутствующими границами. –

1

После некоторого мастерить я, наконец, решить эту проблему. box-decoration-break не поддерживается браузерами на основе webkit (хром, вивальди). С другой стороны, Firefox отлично работает. Пока эта проблема не исправлена ​​в webkit, рекомендуется использовать firefox.