Управление печатью Css, отличное от page-break-after & page-break-before

Question

Я разрабатываю веб-интерфейс, который будет печатать штрих-коды на листе Avery на этикетках. Каков наилучший способ убедиться, что все соответствует точно на каждой этикетке (с помощью физических измерений, например, сантиметров или сантиметров)? И что еще более важно - как я могу обеспечить, чтобы каждый набор ярлыков находился на собственной странице без кровопускания на другую страницу ?

В моем текущем решении используется таблица для каждой страницы, размер которой соответствует ярлыкам (насколько это возможно, возможно, печать избыточного количества страниц в конечном итоге приведет к удалению штрих-кодов с этикеток). Этот небольшой удар препятствует мне добавляя информацию по штрих-кодам, так как это делает удар хуже. Я просмотрел страницы-break-after и перерыв страницы, но установка их, похоже, не влияет.

Заранее благодарен!

Answer 1

Даже если вы не поставить какой-либо код, я возьму удар у него:

Во-первых, получить Selectivizr и JQuery, так что IE может читать CSS3 вещи нам нужно:

• Selectivizr: http://selectivizr.com/
• JQuery: http://jquery.com/

Вот HTML я быстро настроить:

<div id="wrapper"> 
     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 
    </div> 

А вот CSS вам нужно:

body { margin: 0; padding: 0; } 
    #wrapper { width: 100%; display: block; } 
    .barcode { width: 30%; float: left; margin-bottom: 50px; } 
    .barcode img { display: block; width: 150px; height: 150px; margin: 0 auto 10px auto; } /* set to whatever the barcodes will be in size */ 
    .barcode span { display: block; text-align: center; } 
    #wrapper div.barcode:nth-child(3n+4) { clear: left; } 
    #wrapper div.barcode:nth-child(6n+6) { page-break-after: always; background: #000; } /* Use 9n+9 to page break after each 9th item. */ 

Это будет разрыв страницы после каждого 6-й штрих-кода. Если я правильно понимаю ваш вопрос, это «всегда должно работать».

Конечно, я ограничен в количестве систем у меня есть для тестирования ... :)