Skip to content
/ paper Public

๐ŸŒ๐Ÿ“„/๐Ÿ“ โ€“ World Paper / Sizes

License

Notifications You must be signed in to change notification settings

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)

๐Ÿ“ 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

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]