Pt versus px

Developer
Patrick H. Lauke
Size
2,254 Kb
Views
18,216
  1. Pt versus px Previews
  2. Pt versus px HTML Codes
  3. Pt versus px CSS Codes
  4. Pt versus px JS Codes

How do I make an pt versus px?

What is a pt versus px? How do you make a pt versus px? This script and codes were developed by Patrick H. Lauke on 25 September 2022, Sunday.

Pt versus px Previews
IQ Test

Pt versus px - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pt versus px</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><code>pt</code> versus <code>px</code></h1>
<p>visual test to demonstrate that <code>1pt = 1.333px</code> as per <a href="https://drafts.csswg.org/css-values/#absolute-lengths">CSS Values and Units Module Level 3 - 5.2. Absolute lengths</a>.</p>
<p>as <code>1pt = 1/72th of 1in</code> and <code>1px = 1/96th of 1in</code>, <code>1pt = (96/72)px = 1.333px</code></p>
<p>as an additional exercise, take a ruler and measure the actual physical size the <code>pt</code> blocks are being rendered at on <strong>your</strong> particular screen, and see if they match their actual real-world measurement (hint: the <code>72pt</code> block should be <code>1in</code> wide/high if that was the case). They won't, or at least can't be guaranteed to be across devices, as <code>pt</code> and other "physical" units are in fact anchored on the reference <code>px</code> and will vary depending on all sorts of factors, such as actual screen size, screen resolution, viewport settings, browser settings, OS settings, user settings, etc.</p>
<p>note that this page uses <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;</code> to force an "ideal" viewport.</p> <script src="js/index.js"></script>
</body>
</html>

Pt versus px - Script Codes CSS Codes

div { border: 1px #000 solid; margin : 0 0 0.5em 0}
.pt { background: #fee}
.px { background: #efe}

Pt versus px - Script Codes JS Codes

for (var i = 1; i < 10; i++) { document.body.innerHTML += '<div class="pt" style="width:'+i*18+'pt;height:'+i*18+'pt">'+i*18+'pt</div>'; document.body.innerHTML += '<div class="px" style="width:'+(i*1.333)*18+'px;height:'+(i*1.333)*18+'px">'+(i*1.333)*18+'px</div>';
}
Pt versus px - Script Codes
Pt versus px - Script Codes
Home Page Home
Developer Patrick H. Lauke
Username patrickhlauke
Uploaded September 25, 2022
Rating 3
Size 2,254 Kb
Views 18,216
Do you need developer help for Pt versus px?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick H. Lauke (patrickhlauke) Script Codes
Name
Border-radius causes weird form control rendering
Basic fluid typography with vw and issues with full-page zoom - completely broken example
Semi-transparent SVG with transparent background and WHCM
VoiceOver bug with SVG img elements
A Pen by Patrick H. Lauke
-ms-high-contrast media feature
-ms-high-contrast and -ms-high-contrast-adjust
Pixel sizes for physical rendering test
Semi-transparent SVG with transparent background - using SVG with stroke set to currentColor and opacity dependent on high-contrast mode
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!