🌐📄 paper (by 
WebPDF.pro)
📏 size.css
(👇🏻 demo interactions legend 👇🏻)
on <pdf-page>
𝗰𝗹𝗶𝗰𝗸/𝘁𝗮𝗽 (🖱️/👆🏻): next page
𝗿𝗶𝗴𝗵𝘁-𝗰𝗹𝗶𝗰𝗸/𝗹𝗼𝗻𝗴-𝘁𝗮𝗽 (🖱️/👆🏻): previous page
on a paper size
𝗵𝗼𝘃𝗲𝗿 (🖱️): highlight size
𝗰𝗹𝗶𝗰𝗸/𝘁𝗮𝗽 (🖱️/👆🏻): overlay size on <pdf-page> and focus
anywhere
𝘁𝗮𝗯 (⌨️): switch focus between sizes
𝗲𝘀𝗰 (⌨️): cancel size overlay
aspect-ratio will now be notified and offered a direct link to the below simpler codepen!
<link href=//open.pdf.ist/paper/size.css rel=stylesheet>
<style>
[size] {
/* A4 letter
--u: paper size unit 1mm 1in
--w: paper width 210 8.5
--h: paper height 297 11
--wu: paper width × unit == calc(var(--w) * var(--u)) 210mm 8.5in
--hu: paper height × unit == calc(var(--h) * var(--u)) 297mm 11in
*/
aspect-ratio: var(--w) / var(--h);
width: var(--wu);
}
@supports not (aspect-ratio: 1 / 1) { [size] { height: var(--hu); } }
.paper { background-color: #fbfbf8; outline: 1px solid #ccc; }
.paper[size=letter] { position: absolute; transform: translateY(-100%); }
.paper:hover { opacity: .5; }
.paper::before { content: attr(size); position: absolute; font-family: system-ui; }
</style>
<div size=A4 class=paper></div>
<div size=letter class=paper></div>- https://open.PDF.ist/paper/size.css
📦 auto-minified
⛅ via Cloudflare
ISO 4A0 2A0 A0→10 A2→5-extra A3→4-super super-A3→4 A4-long ✔️
B0→10 B5-extra ✔️
C0→10 C7/6 DL ✔️
JPN JIS-B0→12 ✔️
CHN D0→6 ✔️
RD0→6 ✔️
USA letter legal ... 🚧
- https://caniuse.com/mdn-css_properties_aspect-ratio
not needed but it just makes sizing things a true breeze™
This project is proudly sponsored by
<pdf-file><pdf-page> |
|---|
 |
| WebPDF.pro |
Professional PDF web components
in the form of HTML custom elements
Now featuring WASM-powered
high-fidelity ♊ PDFium rendering.
Mention codrops when you contact us at https://WebPDF.pro/#💬 ¹ to get your free 🌐 World-wide license!
¹ also available via email at [email protected]