[NEW] วิธีการสร้างหน้า HTML ในหน้าขนาดกระดาษ A4? | ค่ากระดาษ a4 – NATAVIGUIDES

ย้อนหลังไปเมื่อเดือนพฤศจิกายน 2548 AlistApart.com ตีพิมพ์บทความเกี่ยวกับวิธีที่พวกเขาตีพิมพ์หนังสือโดยไม่ใช้อะไรนอกจาก HTML และ CSS ดู: http://alistapart.com/article/boom

นี่คือข้อความที่ตัดตอนมาจากบทความ:

CSS2 มีแนวคิดเกี่ยวกับสื่อเพจ (คิดว่าแผ่นกระดาษ) ซึ่งตรงข้ามกับสื่อต่อเนื่อง (คิดว่าแถบเลื่อน) สไตล์ชีทสามารถกำหนดขนาดของหน้าและระยะขอบ เทมเพลตหน้าสามารถให้ชื่อและองค์ประกอบสามารถระบุว่าหน้าชื่อพวกเขาต้องการที่จะพิมพ์บน นอกจากนี้องค์ประกอบในเอกสารต้นฉบับสามารถบังคับให้ตัวแบ่งหน้า นี่คือตัวอย่างข้อมูลจากสไตล์ชีทที่เราใช้:

@page
 
{

   size
:
 
7in
 
9.25in
;

   margin
:
 
27mm
 
16mm
 
27mm
 
16mm
;

}

มีผู้เผยแพร่ในสหรัฐอเมริกาเราได้รับขนาดหน้าเป็นนิ้ว เราในฐานะชาวยุโรปยังคงวัดต่อไป CSS ยอมรับทั้งสองอย่าง

หลังจากตั้งค่าขนาดหน้ากระดาษและระยะขอบเราจำเป็นต้องตรวจสอบให้แน่ใจว่ามีตัวแบ่งหน้าในตำแหน่งที่ถูกต้อง ข้อความที่ตัดตอนมาต่อไปนี้แสดงวิธีสร้างตัวแบ่งหน้าหลังจากบทและภาคผนวก:

div
.
chapter
,
 div
.
appendix 
{

    page
-
break
-
after
:
 always
;

}

นอกจากนี้เรายังใช้ CSS2 เพื่อประกาศหน้าชื่อ:

div
.
titlepage 
{

  page
:
 blank
;

}

กล่าวคือจะต้องพิมพ์หน้าชื่อเรื่องบนหน้าที่มีชื่อ“ ว่าง” CSS2 อธิบายแนวคิดของเพจที่มีชื่อ แต่ค่าของเพจนั้นจะปรากฏเมื่อมีส่วนหัวและส่วนท้ายเท่านั้น

อย่างไรก็ตาม…

เนื่องจากคุณต้องการพิมพ์ A4 คุณจะต้องมีขนาดที่แตกต่างกัน:

@page
 
{

    size
:
 
21cm
 
29.7cm
;

    margin
:
 
30mm
 
45mm
 
30mm
 
45mm
;

     
/* change the margins as you want them to be. */

}

บทความกระโดดลงไปในสิ่งต่าง ๆ เช่นการตั้งค่าตัวแบ่งหน้า ฯลฯ ดังนั้นคุณอาจต้องการอ่านอย่างสมบูรณ์

ในกรณีของคุณเคล็ดลับคือการสร้าง CSS พิมพ์ก่อน เบราว์เซอร์สมัยใหม่ส่วนใหญ่ (> 2005) รองรับการซูมและจะสามารถแสดงเว็บไซต์ตาม CSS การพิมพ์ได้

ตอนนี้คุณจะต้องการทำให้การแสดงผลบนเว็บดูแตกต่างไปเล็กน้อยและปรับการออกแบบทั้งหมดให้พอดีกับเบราว์เซอร์ส่วนใหญ่เช่นกัน (รวมถึงแบบเก่าก่อนปี 2005) สำหรับสิ่งนั้นคุณจะต้องสร้างไฟล์ CSS ของเว็บหรือลบล้าง CSS บางส่วนของคุณ เมื่อสร้าง CSS สำหรับการแสดงผลเว็บโปรดจำไว้ว่าเบราว์เซอร์สามารถมีขนาดใดก็ได้ (คิดว่า: “มือถือ” จนถึง “ทีวีจอใหญ่”) ความหมาย: สำหรับเว็บ CSS ความกว้างหน้าและความกว้างของภาพของคุณจะถูกตั้งค่าที่ดีที่สุดโดยใช้ความกว้างของตัวแปร (%) เพื่อรองรับอุปกรณ์แสดงผลจำนวนมากและไคลเอนต์การท่องเว็บที่เป็นไปได้

แก้ไข (26-02-2015)

วันนี้ฉันบังเอิญเจอบทความล่าสุดอีกฉบับที่ SmashingMagazineซึ่งดำน้ำในการออกแบบเพื่อการพิมพ์ด้วย HTML และ CSS … ในกรณีที่คุณสามารถใช้แบบฝึกหัดอื่นได้

แก้ไข (30-10-2018)

มันมาถึงความสนใจของฉันในที่sizeไม่ถูกต้อง CSS3 ซึ่งถูกต้องแน่นอน – ฉันเพิ่งทำซ้ำรหัสที่ยกมาในบทความที่ (ตามที่ระบุไว้) เป็น CSS2 เก่าที่ดี (ซึ่งทำให้รู้สึกเมื่อคุณดูปีบทความและ คำตอบนี้ถูกเผยแพร่ครั้งแรก) อย่างไรก็ตามนี่คือรหัส CSS3 ที่ถูกต้องเพื่อความสะดวกในการคัดลอกและวางของคุณ:

@media
 
print
 
{

    body
{

        width
:
 
21cm
;

        height
:
 
29.7cm
;

        margin
:
 
30mm
 
45mm
 
30mm
 
45mm
;
 

        
/* change the margins as you want them to be. */

   
}
 

}

ในกรณีที่คุณคิดว่าคุณต้องการพิกเซลจริง ๆ ( คุณควรหลีกเลี่ยงการใช้พิกเซล ) คุณจะต้องเลือก DPI ที่ถูกต้องสำหรับการพิมพ์:

• 72 dpi (เว็บ) = 595 X 842 พิกเซล
• 300 dpi (พิมพ์) = 2480 X 3508 พิกเซล
• 600 dpi (งานพิมพ์คุณภาพสูง) = 4960 X 7016 พิกเซล

กระนั้นฉันก็จะหลีกเลี่ยงความยุ่งยากและใช้cm(เซนติเมตร) หรือmm(มิลลิเมตร) ในการกำหนดขนาดเพื่อหลีกเลี่ยงการแสดงผลบกพร่องที่อาจเกิดขึ้นขึ้นอยู่กับลูกค้าที่คุณใช้