Web sayfalarını yazdırmak için piksel cinsinden güvenli genişlik?


86

Bir web sayfasını yazdırmak için piksel cinsinden güvenli genişlik nedir?

Sayfam büyük resimler içeriyor ve yazdırıldığında kesilmeyeceklerinden emin olmak istiyorum.

Farklı tarayıcı kenar boşlukları ve US Letter / DIN A4 kağıt boyutları hakkında bilgim var. Bu yüzden standart harf boyutunda ve bazı varsayılan DPI değerlerimiz var. Ancak bunları görüntünün özniteliğinde belirtmek için piksel değerlerine dönüştürebilir miyim width?


3
piksel cinsinden genişliği kullanmak yerine, width:autoiçeriğin genişliğini kağıdın genişliğine göre ayarlayacak olanı kullanmalısınız
Marko Vranjkovic

Yanıtlar:


89

Gerçek bir "evrensel cevap" gelince, bir tane veremiyorum. Bununla birlikte, bazı ayrıntılara basit ve kesin bir cevap verebilirim ...

670 PİKSEL

En azından bu, Microsoft ürünleri için güvenli bir cevap gibi görünüyor. 675 dahil birçok öneri okudum, ancak bunu kendim test ettikten sonra bulduğum şey 670 oldu.

Tüm DPI, kenar boşluğu sorunları, donanım farklılıkları bir yana, bu yanıt, IE9'da (standart kenar boşluklarıyla) baskı önizlemeyi kullanırsam ve "sığacak şekilde küçült" varsayılanı yerine BASKI BOYUTUNU% 100'E AYARLAMAK gerçeğine dayanmaktadır. , her şey bu genişlikte kesilmeden sayfaya sığar.

Kendime bir HTML e-postası göndersem ve bunu Windows Live Mail 2011 ile alırsam (Outlook Express ne hale geldi) ve sayfayı 670 genişliğinde yazdırırsam - yine her şey uyuyor. Bu, onu gerçek bir basılı kopyaya veya bir MS XPS dosyasına (sanal çıktı) gönderirsem geçerlidir.

Denemeden önce, keyfi olarak 700 genişliğini kullanıyordum. Yukarıda bahsedilen tüm senaryolarda sayfanın bir kısmı kesiliyordu. 670'e düşürdüğümde her şey mükemmel bir şekilde uyuyor.

Genişliği nasıl ayarladığıma gelince - sadece ilkel bir "sarmalayıcı" html tablosu kullandım ve genişliğini 670 olarak tanımladım.

Son kullanıcının yazılımını dikte edebiliyorsanız, bu tür konular doğrudan olabilir. Yapamazsanız (genellikle olduğu gibi), hangi tarayıcıları kullandıkları vb. Gibi ayrıntıları test edebilir ve önemli olanlar için çözümleri kodlayabilirsiniz. IE ve FF arasında, kelimenin tam anlamıyla web kullanıcılarının yaklaşık% 90'ını kapsayacaksınız. "Diğer herkes" için genellikle işe yarıyor gibi görünen ve buna bir gün diyen başka bir kod girin ...


Bu cevabın verildiği sırada FF ve IE'nin aralarında kullanılan tarayıcıların% 90'lık payına sahip olabileceğine dair bir yorum eklemek isterim (google'ın hemen hemen başka biriyle arama yapan herhangi bir kişiye Chrome sunması pek olası değil. imo şu anda daha hafif bir tarayıcıdır), ancak trendler değiştikçe ve bir tarayıcı payı genellikle diğer pazar payları gibi değiştikçe hala değişme olasılığı düşüktür.
Chris

Basit bir piksel boyutundan açıkça daha karmaşık olmasına rağmen bu, soruyu yanıtlar.
rune711

46

Göründüğü kadar basit değil. Az önce benzer bir soruyla karşılaştım ve işte karşıma çıkan şey: İlk olarak, wikipedia hakkında biraz arka plan .

Sonra, CSS'de, kağıt için pt, nokta veya 1/72 inç var. Bu nedenle, monitördeki ile aynı boyutta bir görüntünün olmasını istiyorsanız, önce monitörünüzün DPI / PPI'sini bilmeniz gerekir (wikipedia makalesinde belirtildiği gibi genellikle 96), sonra onu inç'e çevirin, sonra onu puan (72'ye bölün).

Ancak yine de, tarayıcıların yazdırılabilir içerikle ilgili her türlü sorunu vardır; örneğin, float css etiketlerini kullanmaya çalışırsanız, Gecko tabanlı tarayıcılar, sayfa sonu kullansanız bile, resimlerinizi sayfanın ortasında keser: kaçının ; resimlerinizde (buraya bakın, Mozilla hata izleme sisteminde ).

A List Apart'taki bu makalede bir tarayıcıdan yazdırmayla ilgili (çok) daha fazla şey var. .

Ayrıca, baskı önizlemede genişlik "Sığacak Şekilde Küçült" ve çeşitli kağıt boyutları ve yönlerini ele almanız gerekir.

Öyleyse width: 511pt;, piksel boyutlarından bağımsız olarak ya sadece inç cinsinden iyi bir görüntü boyutu bulursunuz, yani noktaları (7,1 "* 72 = 511,2 bu yüzden letter boyutlu kağıt için işe yarar ) ya da genişlik yüzdesi genişliklerine gidin ve görüntü genişliklerinizi temel alın kağıt boyutunda.

İyi şanslar...


Aslında, yazdırmak istediğim materyalin (kartpostallar, el ilanları, vb.) Bir db'den bilgi beslediğim ve kendisini buna göre yeniden biçimlendirdiğim bir PHP Image GD sürümünü oluştururken daha kolay zaman geçirdim. Ben sadece piksel oranını doğru tuttum. 4x6 kartpostal (350 dpi) == 2135x1435 piksel
Michael J. Calkins

20

Bulduğum sorunun bir çözümü, genişliği inç olarak ayarlamaktı. Şimdiye kadar bunu yalnızca Chrome'da test ettim / onayladım. Kullandığım şey için iyi çalıştı (8,5 x 11 sayfa yazdırmak için)

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

5
Sayfa kenar boşluklarını hesaba katmıyorsunuz. Veya A4 kağıt boyutları olasılığı.
Blazemonger

1
Bu benim için mükemmeldi, çok mantıklı.
leedotpang

@Blazemonger ile @media printbunları ayarlayabilirsiniz. Ayarlayabilirsiniz size: letterveya size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
J.Ko

@ J.Ko Konu bu değildi; A4 veya mektup kağıdı kullanabilecek son kullanıcıdır ve CSS tasarımcısı, hangisinin kullanıcı için uygun olduğundan emin olamaz.
Blazemonger

10

Baskı için herhangi bir genişlik belirlemiyorum ve baskı düzeninizin dinamik genişliğe sahip olmasını engelleyen engelleri kaldırıyorum. Yani, tarayıcı pencerenizi küçültürseniz, içerik kesilmez / gizlenmez, ancak belge uzar. Bunun gibi, geri kalanının printer / pdf-creator tarafından halledileceğinden emin olabilirsiniz.

Resimler veya tablolar gibi sabit genişliğe sahip öğeler ne olacak?

Görüntüler

Aklıma gelen seçenekler:

  • baskı CSS'nizdeki görüntüleri, her durumda sığacağını varsayabileceğiniz bir genişliğe küçültün, pt'yi kullanın, px değil (ancak baskı her durumda daha fazla nokta / birime ihtiyaç duyacaktır, bu yüzden bu bir sorun olmaz)
  • basılmanın dışında bırak

Tablolar

  • sabit genişliği kaldır
  • gerçekten çok fazla bilgi içeren tablolarınız varsa manzara kullanın
  • tabloları düzen amacıyla kullanmayın
  • basılmanın dışında bırak
  • içeriği çıkar, paragraf olarak yazdır

http://www.intensivstation.ch/en/css/print/

veya şu kombinasyonlar için herhangi bir Google sonucu: CSS, baskı, medya, düzen


2
Peki ya resimler ve tablolar gibi sabit genişliğe sahip öğeler?
aemkei

5

Web sayfasında yazdırıldığında görüntülerin kesilmemesini sağlamanın bir çözümü, aşağıdaki CSS kuralına sahip olmaktır:

@media print { 
  img { 
    max-width:100% !important;
  } 
}

4

Bir yazıcı pikselleri anlamaz, noktaları anlar (CSS'de pt). En iyi çözüm, yazdırmak için tüm ölçüleri nokta şeklinde olan fazladan bir CSS yazmaktır.

Ardından, HTML kodunuzun baş kısmına şunu yazın:

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

Ancak görüntülerin piksel cinsinden belirtilen genişlik ve yükseklik özelliklerine ihtiyacı vardır. Yazıcı standardı DPI ve boyutuna göre PT değerlerini piksele dönüştürmem gerekiyor.
aemkei

O zaman görüntü kaplarıyla oynamalısınız ... veya deneme yanılma uygulamanız gerekir;) Bununla birlikte, biri ekran, diğeri yazdırma için olmak üzere iki ayrı CSS dosyası kullanmanın iyi bir uygulama olduğunu düşünüyorum.
ARemesal

1
vermek <img>etiketi bir surroundig <div>div punto bir yüksekliğe genişliği alır ve img alırwidth:100%; height:100%;
Hafenkranich

0

Biri olduğundan şüpheliyim ... Tarayıcıya, yazıcıya (fiziksel maksimum dpi) ve sürücüsüne, sizin belirttiğiniz gibi kağıt boyutuna bağlıdır (ve ben de B5 kağıda yazdırmak isteyebilirim ...), ayarlara ( manzara mı portre mi?), artı sık sık ölçeği (yüzde) vb. değiştirebilirsiniz.
. Kullanıcıların ayarlarını değiştirmelerine izin verin ...

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.