A4 kağıt boyutu sayfalarında HTML Sayfası nasıl oluşturulur?

Bir HTML sayfasının örneğin MS Word'deki A4 boyutlu bir sayfa gibi davranmasını sağlamak mümkün müdür?

Esasen, HTML sayfasını tarayıcıda gösterebilmek ve içeriği A4 boyutunda bir sayfanın boyutlarında özetlemek istiyorum.

Basitlik adına, HTML sayfasının yalnızca metin içerdiğini (resim vb.) Ve <br>örneğin etiket olmayacağını varsayıyorum .

Ayrıca, HTML sayfası yazdırıldığında, A4 boyutlu kağıt sayfalar olarak çıkacaktır.

Yıllar önce, Kasım 2005'te AlistApart.com, HTML ve CSS'den başka bir şey kullanmayan bir kitabı nasıl yayınladıklarına dair bir makale yayınladı. Bkz. Http://alistapart.com/article/boom

İşte bu makaleden bir alıntı:

CSS2, sürekli ortamın (düşünme çubukları) aksine, disk belleği olan ortam (kağıt sayfalarını düşünün) kavramına sahiptir. Stil sayfaları sayfaların boyutunu ve kenar boşluklarını ayarlayabilir. Sayfa şablonlarına ad verilebilir ve öğelere hangi adların yazdırılmasını istediklerini belirtebilir. Ayrıca, kaynak belgedeki öğeler sayfa sonlarını zorlayabilir. İşte kullandığımız stil sayfasından bir pasaj:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

ABD merkezli bir yayıncıya sahip olduğumuz için sayfa boyutu inç olarak verildi. Avrupalı ​​olarak metrik ölçümlere devam ettik. CSS her ikisini de kabul eder.

Sayfa boyutunu ve kenar boşluğunu ayarladıktan sonra, doğru yerlerde sayfa sonları olduğundan emin olmamız gerekiyordu. Aşağıdaki alıntı, bölüm ve eklerden sonra sayfa sonlarının nasıl oluşturulduğunu gösterir:

div.chapter, div.appendix {
    page-break-after: always;
}

Ayrıca, adlandırılmış sayfaları bildirmek için CSS2 kullandık:

div.titlepage {
  page: blank;
}

Yani, başlık sayfası “boş” adındaki sayfalara yazdırılacaktır. CSS2, adlandırılmış sayfalar kavramını tanımladı, ancak değerleri yalnızca üstbilgiler ve altbilgiler kullanılabilir olduğunda görünür hale geliyor.

Neyse ...

A4 yazdırmak istediğiniz için, elbette farklı boyutlara ihtiyacınız olacak:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

Makale, sayfa sonları ayarlama vb. Konulara daldığından, bunu tamamen okumak isteyebilirsiniz.

Sizin durumunuzda, püf noktası önce yazdırma CSS'sini oluşturmaktır. Modern tarayıcıların çoğu (> 2005) yakınlaştırmayı destekler ve basılı CSS'ye dayalı bir web sitesini zaten görüntüleyebilir.

Şimdi, web ekranının biraz farklı görünmesini ve tüm tasarımı çoğu tarayıcıya uyacak şekilde uyarlamak istersiniz (eski, 2005 öncesi olanlar dahil). Bunun için bir web CSS dosyası oluşturmanız veya yazdırma CSS'nizin bazı bölümlerini geçersiz kılmanız gerekir. Web ekranı için CSS oluştururken, bir tarayıcının HERHANGİ bir boyuta sahip olabileceğini unutmayın (düşünün: “mobil” e kadar “büyük ekran TV'ler”). Anlamı: Web CSS'si için sayfa genişliğiniz ve görüntü genişliğiniz en iyi şekilde, mümkün olduğunca çok sayıda görüntüleme cihazını ve web tarama istemcisini desteklemek için değişken genişlik (%) kullanılarak ayarlanır.

DÜZENLE (26-02-2015)

Bugün, SmashingMagazine'de HTML ve CSS ile baskı için tasarım yapmaya da dahil olan daha yeni bir makaleye rastladım … başka bir öğreticiyi kullanabilmeniz durumunda.

DÜZENLE (30-10-2018)

sizeGerçekten doğru olan geçerli CSS3 olmadığı için dikkatimi çekti - sadece (not edildiği gibi) iyi eski CSS2 olan makalede alıntılanan kodu tekrarladım (makaleye baktığınızda mantıklı ve bu cevap ilk olarak yayınlandı). Her neyse, kopyala ve yapıştır kolaylığınız için geçerli CSS3 kodu:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Piksellere gerçekten ihtiyacınız olduğunu düşünüyorsanız ( aslında piksel kullanmaktan kaçınmalısınız ), yazdırma için doğru DPI'yi seçmeniz gerekir :

• 72 dpi (web) = 595 X 842 piksel
• 300 dpi (baskı) = 2480 X 3508 piksel
• 600 dpi (yüksek kaliteli baskı) = 4960 X 7016 piksel

Yine de, güçlükten kaçınır ve kullandığınız istemciye bağlı olarak ortaya çıkabilecek aksaklıkların oluşmasını önlediğinden, boyutlandırma için cm(santimetre) veya mm(milimetre) kullanırım.

Web tarayıcıyı sayfayı A4 ile aynı piksel boyutlarında görüntülemeye zorlamak oldukça kolay olacaktır. Bununla birlikte, işler oluşturulduğunda birkaç tuhaflık olabilir.

Monitörlerinizin 72 dpi olduğunu varsayarsak, şöyle bir şey ekleyebilirsiniz:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

A4 boyutu 210x297 mm'dir

Böylece HTML sayfasını CSS ile bu boyutlara uyacak şekilde ayarlayabilirsiniz:

html,body{
    height:297mm;
    width:210mm;
}

Her sayfayla bölüm oluşturun ve kenar boşluklarını, yüksekliği ve genişliği ayarlamak için aşağıdaki kodu kullanın.

A4 boyutunda yazdırıyorsanız.

Sonra kullanıcı

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

ardından içindeki tüm içeriğinizle bir div oluşturun.

<div class="Section1"> 
    type your content here... 
</div>

veya

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

HTML'yi, gerçek kağıtta gerçek boyutlarda doğru şekilde yazdırılan raporlar oluşturmak için kullandım.

CSS dosyasındaki birimleriniz olarak mm'yi dikkatli bir şekilde kullanırsanız, en azından tek sayfalar için iyi olmalısınız. Yine de, insanlar tarayıcılarındaki yazdırma zoom'unu değiştirerek sizi mahvedebilir.

Yaptığım her şeyin tek bir sayfa olduğunu hatırlıyorum, bu yüzden sayfalandırma konusunda endişelenmem gerekmiyordu - bu çok daha zor olabilir.

Google'da arama yaptıktan sonra "A4 CSS sayfa şablonu" (codepen.io) için arama yaptıktan sonra bu çözümü gördüm. <page> etiketini kullanarak tarayıcıda A4 (A3, A5, portre) boyutunda bir alan gösterir. Bu etiketin içinde içerik gösterilir, ancak tarayıcı alanına göre mutlak konum hala vardır.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Bu dahil edilecek herhangi bir css / js-library olmadan benim için çalışıyor. Geçerli tarayıcılar için çalışır (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

Normalde style.css:

table.tableclassname {
  width: 400px;
}

Sizin print.css:

table.tableclassname {
  width: 16 cm;
}

ÜFE ve DPI, bir belgenin tarayıcıdan nasıl yazdırılacağı konusunda kesinlikle bir fark yaratmaz. yazıcı, ekran nokta aralığı veya görüntülerin DPI'si vb. hakkında hiçbir bilgi almaz. Görüntüleri bastırıyorsanız, ekranda gösterildiklerine benzer boyutta basarlar. tarayıcının yazdırma işlemcisi, görüntülerin DPI'sını 72 dpi gibi oldukça düşük bir şeyden belgenin geri kalanının DPI'sine kadar artıracaktır. görüntünün yarım sayfa genişliğinde, ardından fiziksel olarak yaklaşık 4 "genişliğinde görüntülendiğini varsayalım. görüntünün piksel genişliği tarayıcıda doğru bir şekilde görüntülenmek için yaklaşık 300 piksel olacaktır. nominal 300DPI çözünürlükte yazdırıldığında işlemci piksel ekledi ve görüntü 1200 DPI değerinde yaklaşık 300 DPI boyutunda büyüyecek.

vektör veya metin gibi piksel tabanlı olmayan elemanlar söz konusu olduğunda, yazıcı, tarayıcı 3000 piksel genişliğinde ise, ekranın nokta aralığı veya tarayıcı genişliği vb. ile ilgili olmayan kendi DPI'sını sürücüden seçer, yazdırma işlemcisi metni uygun şekilde sarar.

heres baskı ekranları oluşturmayı zorlaştıran şeydir: her tarayıcı ve yazıcı metin boyutlarını (pt, em, px) ve aralıkları kendi yöntemiyle yorumlar. hangi yazıcıyı, tarayıcıyı ve hatta belki de işletim sistemini kullandığınıza bağlı olarak, sayfa başına farklı miktarda satır ve karakter elde edersiniz. tarayıcınızı ve yazıcınızı kullanarak bilgisayarınızda test edip metni 640x900px boyutunda bir kutuda görüntüleyebileceğinizi ve baskıda mükemmel olduğunu anlasanız bile, yazdırmaya çalışan bir sonraki adam muhtemelen farklı bir şekilde yazdırır. her yazıcıyı ve tarayıcıyı her seferinde özdeş olmaya zorlamanın bir yolu yoktur.

pikselleri ve moreso unutma DPI'yı unutma, pikselleri kullanabileceğiniz tek şey yazıcınızdaki yazdırılabilir alanın genişliğini simüle eden bir tablo genişliği ayarlamaktır. bu durumda 640 piksel genişliğinde yakın buldum.

Benzer bir sorun mu arıyorsunuz bunu buldum - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4, görüntü çözünürlüğüne bağlı olarak ekran görüntüsü olarak bir belge biçimidir, örneğin aşağıdakilere göre yeniden boyutlandırılan bir A4 belgesi:

• 72 dpi (web) = 595 X 842 piksel
• 300 dpi (baskı) = 2480 X 3508 piksel (Bildiğim gibi bu "A4", yani "210mm X 297mm @ 300 dpi")
• 600 dpi (baskı) = 4960 X 7016 piksel

Bu konunun oldukça eski olduğunu biliyorum ama bu konuyla ilgili deneyimlerimi paylaşmak istiyorum. Aslında günlük raporlarımda bana yardımcı olabilecek bir modül arıyordum. HTML + CSS'de (Word, Latex, OO, ... yerine) bazı belgeler ve bazı raporlar yazıyorum. Nesne, arkadaşlarınızla paylaşmak için A4 kağıda yazdırmak olurdu ... Arama yapmak yerine, "sayfalar", sayfa numarası, özet, başlık işlemek için basit bir lib uygulamak için küçük bir komik kodlama oturumu yapmaya karar verdim , altbilgi, .... Sonunda ~ ~ 2h içinde yaptım ve bunun şimdiye kadarki en iyi araç olmadığını biliyorum ama neredeyse amacım için tamam. Bu projeye repo'mda bir göz atabilir ve fikirlerinizi paylaşmaktan çekinmeyin. % 100'de aradığınız şey olmayabilir, ancak bu modülün size yardımcı olabileceğini düşünüyorum.

Temelde bir gövde sayfası "width: 200mm;" ve yükseklik konteyneri: 290mm (A4'ten daha küçük). Sonra sayfa sonu kullandım: her zaman; böylece tarayıcının "yazdır" seçeneği sayfaların ne zaman bölüneceğini bilir.

repo: https://github.com/kursion/jsprint

Teknik olarak, yapabilirsiniz, ancak tüm tarayıcıların sayfayı tam olarak ekranda göründüğü gibi yazdırmasını sağlamak çok fazla iş gerektirir. Ayrıca, çoğu tarayıcı çıktıda URL'yi, baskı tarihini ve sayfa numaralandırmasını zorunlu kılar, bu da her zaman istenmez. Bu değiştirilemez veya devre dışı bırakılamaz.

Bunun yerine, ekrandaki içeriğe dayalı bir PDF oluşturmanızı ve PDF'yi indirme ve / veya yazdırma için sunmayı öneririm. Her ne kadar çoğu mevcut PDF kütüphaneleri ödenir, birkaç vardır ücretsiz alternatifler temel PDF oluşturma için kullanılabilir.

680 piksel kullandım1998'den beri A4 sayfalara yazdırmak için ticari raporlarda . 700 piksel, kenar boşluklarının boyutuna tam olarak sığamadı. Modern tarayıcılar sayfayı yazıcıya sığacak şekilde daraltabilir, ancak 680 piksel kullanırsanız hemen hemen tüm tarayıcılarda doğru yazdırırsınız.

Bu size HTML'dir Kod snippet'ini çalıştırın ve de sonuç bakın:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Yapmanın birçok yolu:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

A4 sayfasının oranlarını alacak şekilde düzeninizi ayarlamak tamamen mümkündür. Yalnızca buna göre ayarlanmış genişlik ve yüksekliğe sahip olacaktır (muhtemelen kontrol window.innerHeightve window.innerWidthben emin güvenilir olup olmadığını değilim rağmen).

Zor kısmı A4 baskı ile. Örneğin Javascript, sayfaların window.printyöntemle basit bir şekilde yazdırılmasını destekler . @Prutswonder'in web sayfasından PDF oluşturmayı önerdiği gibi , muhtemelen bunu yapmanın en gelişmiş yolu (PDF belgelerini ilk başta sağlamak dışında). Ancak, bu düşündüğünüz kadar önemsiz değildir. HTML'den PDF oluşturmak için tüm açık kaynaklı Java sınıfının açıklamasını içeren bir bağlantı: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Açıkçası, A4 boyutlarında yazdırmaya sahip bir PDF oluşturduğunuzda, sayfanızın temiz bir A4 baskısına neden olacaktır. Bunun zaman yatırımına değip değmeyeceği başka bir soru.