Skip to content

pdf-ist/paper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 

Repository files navigation

🌐📄 paper (by WebPDF.pro)

(👇🏻 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

size.css

⚠️ There was a problem with the above quick demo affecting latest Firefox and Safari 15 TP, which has now been addressed!
⚠️ Browsers that do not support aspect-ratio will now be notified and offered a direct link to the below simpler codepen!

Usage

<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>

URL

Series

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 ...                                        🚧

See also


💴 Sponsorship

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.

💧 🚚 🌐📄🎁
codrops WebPDF.pro gift

Mention codrops when you contact us at https://WebPDF.pro/#💬 ¹ to get your free 🌐 World-wide license!
¹ also available via email at [email protected]