Jaka jest bezpieczna szerokość w pikselach do wydrukowania strony internetowej?
Moja strona zawiera duże obrazy i chcę się upewnić, że nie zostaną odcięte po wydrukowaniu.
Wiem o różnych marginesach przeglądarki i rozmiarach papieru US Letter / DIN A4. Otrzymaliśmy więc standardowy rozmiar litery i kilka domyślnych wartości DPI. Ale czy mogę przekonwertować je na wartości pikseli , aby określić je w widthatrybucie obrazu ?
Odpowiedzi:
Jeśli chodzi o prawdziwą „uniwersalną odpowiedź”, nie mogę jej udzielić. Mogę jednak udzielić prostej i ostatecznej odpowiedzi na niektóre szczegóły ...
670 PIKSELI
Przynajmniej wydaje się to bezpieczną odpowiedzią dla produktów Microsoft. Czytałem wiele sugestii, w tym 675, ale po przetestowaniu tego samemu 670 jest tym, co wymyśliłem.
Pomijając wszystkie DPI, problemy z marginesami, różnice sprzętowe, ta odpowiedź opiera się na fakcie, że jeśli używam podglądu wydruku w IE9 (ze standardowymi marginesami) - i USTAWIAM ROZMIAR DRUKU NA 100% zamiast domyślnego „zmniejsz, aby dopasować” , wszystko mieści się na stronie bez ucinania na tej szerokości.
Jeśli wyślę do siebie wiadomość e-mail w formacie HTML i otrzymam ją w programie Windows Live Mail 2011 (czym stał się Outlook Express) i wydrukuję stronę o szerokości 670 - znowu wszystko pasuje. Jest to prawdą, jeśli wyślę go do rzeczywistego wydruku lub pliku MS XPS (wydruk wirtualny).
Zanim zacząłem eksperymentować, użyłem dowolnej szerokości 700. We wszystkich opisanych powyżej scenariuszach odcinano część strony. Kiedy zmniejszyłem do 670, wszystko pasowało idealnie.
Jeśli chodzi o ustawienie szerokości - po prostu użyłem prymitywnej „opakowującej” tabeli html i zdefiniowałem jej szerokość na 670.
Jeśli możesz dyktować oprogramowanie użytkownika końcowego, takie sprawy mogą być proste. Jeśli nie możesz (jak to zwykle bywa w przypadku), możesz przetestować szczegółowe informacje, takie jak przeglądarki, których używają, itp. I zakodować na stałe rozwiązania dla ważnych. Między IE a FF pokryjesz dosłownie około 90% użytkowników sieci. Wpisz inny kod dla „wszystkich innych”, który generalnie wydaje się działać i nazwij to dniem ...
To nie jest tak proste, jak wygląda. Właśnie natknąłem się na podobne pytanie i oto co otrzymałem: Po pierwsze, trochę informacji o Wikipedii .
Następnie w CSS dla papieru mają pt, czyli punkt, czyli 1/72 cala. Więc jeśli chcesz mieć ten sam rozmiar obrazu co na monitorze, najpierw musisz znać DPI / PPI swojego monitora (zwykle 96, jak wspomniano w artykule na Wikipedii), a następnie przekonwertować go na cale, a następnie przekonwertować na punktów (podziel przez 72).
Ale z drugiej strony przeglądarki mają różnego rodzaju problemy z treścią do wydrukowania, na przykład, jeśli spróbujesz użyć pływających tagów css, przeglądarki oparte na Gecko wycinają twoje obrazy na środku strony, nawet jeśli używasz podziału strony wewnątrz: unikaj ; na twoich obrazach (zobacz tutaj, w systemie śledzenia błędów Mozilli ).
Więcej informacji na temat drukowania z przeglądarki znajduje się w artykule A List Apart .
Ponadto w podglądzie wydruku musisz zająć się szerokością „Zmniejsz, aby dopasować” oraz różnymi rozmiarami i orientacjami papieru.
Więc albo po prostu wybierzesz dobry rozmiar obrazu w calach, mam na myśli punkty, (7,1 "* 72 = 511,2, więc width: 511pt;działałoby na papierze o rozmiarze Letter), niezależnie od rozmiarów pikseli", albo przejdź do szerokości procentowych szerokości i oprzyj szerokość obrazu na rozmiar papieru.
Powodzenia...
Jednym z rozwiązań problemu, który znalazłem, było ustawienie szerokości w calach. Do tej pory tylko przetestowałem / potwierdziłem, że działa w Chrome. Działał dobrze w tym, do czego go używałem (do wydrukowania arkusza 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, możesz ustawić te. Możesz ustawić size: letterlub size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
W przypadku drukowania nie ustawiam żadnej szerokości i usuwam wszelkie przeszkody, które uniemożliwiają układowi wydruku dynamiczną szerokość. Oznacza to, że jeśli zmniejszasz i zmniejszasz okno przeglądarki, żadna zawartość nie jest wycinana / ukrywana, ale dokument po prostu się wydłuża. W ten sposób możesz być pewien, że resztą zajmie się drukarka / kreator plików PDF.
A co z elementami o stałej szerokości, takimi jak obrazy lub tabele?
Opcje, które przychodzą mi do głowy:
http://www.intensivstation.ch/en/css/print/
lub jakikolwiek inny wynik Google dla kombinacji: CSS, druk, media, układ
Aby zapewnić, że obrazy nie zostaną obcięte podczas drukowania na stronie internetowej, należy zastosować następującą regułę CSS:
@media print {
img {
max-width:100% !important;
}
}
Drukarka nie rozumie pikseli, rozumie kropki (pt w CSS). Najlepszym rozwiązaniem jest napisanie dodatkowego arkusza CSS do drukowania, z wszystkimi jego miarami w kropkach.
Następnie w kodzie HTML, w sekcji head, umieść:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img><div>width:100%; height:100%;
Wątpię, czy istnieje ... Zależy to od przeglądarki, drukarki (fizyczna maksymalna rozdzielczość) i jej sterownika, rozmiaru papieru, jak wskazałeś (a może chciałbym drukować również na papierze B5 ...), ustawień ( krajobraz czy portret?), a ponadto często możesz zmienić skalę (procent) itp.
Pozwól użytkownikom dostosować ustawienia ...
width:autoktóry dostosuje szerokość treści do szerokości papieru