Skip to content

Instantly share code, notes, and snippets.

@Blumed

Blumed/px-rem-converter-bookmarklet.js

Last active March 13, 2025 19:46
Show Gist options
  • Save Blumed/47b10fb4dccc2cb430c679868d2a9e0e to your computer and use it in GitHub Desktop.
Save Blumed/47b10fb4dccc2cb430c679868d2a9e0e to your computer and use it in GitHub Desktop.
Download ZIP
pixel to rem converter bookmarklet
Raw
px-rem-converter-bookmarklet.js
const container = document.createElement("div");
container.className = "xxxxxx_wrapper_xxxxx";
container.setAttribute("style", container.styles);
document.body.appendChild(container);
const close = document.createElement("button");
close.setAttribute("type", "button");
close.className = "xxxxxx_close_xxxxx";
close.textContent = "Close";
close.onclick = () => container.remove();
container.appendChild(close);
function copyText(text) {
try {
navigator.clipboard.writeText(text);
} catch (err) {
console.error("Failed to copy text: ", err);
}
}
const copyIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>';
const rootLabel = document.createElement("label");
rootLabel.className = "xxxxxx_root-label_xxxxx";
rootLabel.textContent = "root";
container.appendChild(rootLabel);
const rootInput = document.createElement("input");
rootInput.setAttribute("type", "number");
rootInput.className = "xxxxxx_root-input_xxxxx";
rootInput.id = "root-input";
rootInput.placeholder = 0;
rootLabel.appendChild(rootInput);
const pixelLabel = document.createElement("label");
pixelLabel.className = "xxxxxx_pixel-label_xxxxx";
pixelLabel.textContent = "px";
container.appendChild(pixelLabel);
const pixelInput = document.createElement("input");
pixelInput.setAttribute("type", "number");
pixelInput.className = "xxxxxx_pixel-input_xxxxx";
pixelInput.id = "pixel-input";
pixelInput.placeholder = 0;
pixelLabel.appendChild(pixelInput);
const pixelCopy = document.createElement("button");
pixelCopy.setAttribute("type", "button");
pixelCopy.className = "xxxxxx_pixel-copy_xxxxx";
pixelCopy.id = "pixel-copy";
pixelCopy.innerHTML = copyIcon;
pixelCopy.title = "Copy Pixel";
pixelCopy.onclick = () => {
copyText(`${pixelValue.value}px`);
};
pixelLabel.appendChild(pixelCopy);
const remLabel = document.createElement("label");
remLabel.className = "xxxxxx_rem-label_xxxxx";
remLabel.textContent = "rem";
container.appendChild(remLabel);
document.addEventListener("keydown", (event) => {
if (container && event.key === "Escape") {
container.remove();
}
});
const remInput = document.createElement("input");
remInput.setAttribute("type", "number");
remInput.className = "xxxxxx_rem-input_xxxxx";
remInput.id = "rem-input";
remInput.placeholder = 0;
remLabel.appendChild(remInput);
const remCopy = document.createElement("button");
remCopy.setAttribute("type", "button");
remCopy.className = "xxxxxx_rem-copy_xxxxx";
remCopy.id = "rem-copy";
remCopy.innerHTML = copyIcon;
remCopy.title = "Copy Rem";
remCopy.onclick = () => {
copyText(`${remValue.value}rem`);
};
remLabel.appendChild(remCopy);
const inputs = document.querySelectorAll(".xxxxxx_wrapper_xxxxx input");
const rootFontSize = window.getComputedStyle(document.documentElement).fontSize.replace('px', '');
const rootValue = document.getElementById("root-input");
rootValue.value = rootFontSize;
const pixelValue = document.getElementById("pixel-input");
pixelValue.value = 10;
const remValue = document.getElementById("rem-input");
remValue.value = pixelValue.valueAsNumber / rootValue.valueAsNumber;
inputs.forEach((input) => {
input.addEventListener("keyup", (event) => {
if (event.target === rootValue) {
pixelValue.valueAsNumber =
pixelValue.valueAsNumber / rootValue.valueAsNumber;
}
if (event.target === pixelValue) {
remValue.valueAsNumber =
pixelValue.valueAsNumber / rootValue.valueAsNumber;
}
if (event.target === remValue) {
pixelValue.valueAsNumber =
remValue.valueAsNumber * rootValue.valueAsNumber;
}
});
});
const style = document.createElement("style");
style.textContent = `
.xxxxxx_wrapper_xxxxx {
width: 100%;
letter-spacing:1px;
background-color: #b9e7de;
text-align:right;
font-family:helvetica !important;
font-weight:100;
padding-inline: 60px;
color:#161613;
margin:auto;
position:fixed;
top:0;
right:0;
left:0;
z-index:2147483647;
font-size:18px;
text-rendering:optimizeLegibility;
text-align:center;
display: flex;
justify-content: center;
gap: 2rem;
padding-block: 10px;
}
.xxxxxx_close_xxxxx {
position: absolute;
left: 0;
top: 0px !important;
background-color: #edece8 !important;
color: black !important;
z-index: 30;
padding: 8px !important;
font-size: 18px !important;
height: 100% !important;
cursor: pointer !important;
display: flex;
justify-content: center;
align-items: center;
border: 0;
font-weight: normal !important;
border-right: 2px solid black;
&:hover {
background-color: #fff !important;
}
}
.xxxxxx_wrapper_xxxxx label {
padding-left: 8px;
border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #333;
background-color: #eee !important;
font-family: monospace !important;
letter-spacing: 0.5px;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
margin: 0 !important;
font-size: inherit !important;
}
.xxxxxx_wrapper_xxxxx input[type='number'] {
padding: 3px 6px;
border-top: 0;
border-bottom: 0;
border-right: 2px solid #333;
margin-left: 8px;
font-size: inherit;
height: auto !important;
color: black !important;
background-color: #fff !important;
border-radius: 0 !important;
-moz-appearance:textfield;
}
.xxxxxx_wrapper_xxxxx input + button {
height: 100%;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
border-right: 2px solid #333;
background-color: #6b6b6b !important;
display: flex !important;
align-items: center !important;
}
.xxxxxx_wrapper_xxxxx input::-webkit-outer-spin-button,
.xxxxxx_wrapper_xxxxx input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.xxxxxx_wrapper_xxxxx input::placeholder {
font-weight: bold;
color: inherit;
}
`;
container.appendChild(style);
// Paste the one line below into your bookmark url field for this code to work
javascript:(function(){const container=document.createElement("div");container.className="xxxxxx_wrapper_xxxxx",container.setAttribute("style",container.styles),document.body.appendChild(container);const close=document.createElement("button");function copyText(e){try{navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy text: ",e)}}close.setAttribute("type","button"),close.className="xxxxxx_close_xxxxx",close.textContent="Close",close.onclick=()=>container.remove(),container.appendChild(close);const copyIcon='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>',rootLabel=document.createElement("label");rootLabel.className="xxxxxx_root-label_xxxxx",rootLabel.textContent="root",container.appendChild(rootLabel);const rootInput=document.createElement("input");rootInput.setAttribute("type","number"),rootInput.className="xxxxxx_root-input_xxxxx",rootInput.id="root-input",rootInput.placeholder=0,rootLabel.appendChild(rootInput);const pixelLabel=document.createElement("label");pixelLabel.className="xxxxxx_pixel-label_xxxxx",pixelLabel.textContent="px",container.appendChild(pixelLabel);const pixelInput=document.createElement("input");pixelInput.setAttribute("type","number"),pixelInput.className="xxxxxx_pixel-input_xxxxx",pixelInput.id="pixel-input",pixelInput.placeholder=0,pixelLabel.appendChild(pixelInput);const pixelCopy=document.createElement("button");pixelCopy.setAttribute("type","button"),pixelCopy.className="xxxxxx_pixel-copy_xxxxx",pixelCopy.id="pixel-copy",pixelCopy.innerHTML=copyIcon,pixelCopy.title="Copy Pixel",pixelCopy.onclick=()=>{copyText(`${pixelValue.value}px`)},pixelLabel.appendChild(pixelCopy);const remLabel=document.createElement("label");remLabel.className="xxxxxx_rem-label_xxxxx",remLabel.textContent="rem",container.appendChild(remLabel),document.addEventListener("keydown",(e=>{container&&"Escape"===e.key&&container.remove()}));const remInput=document.createElement("input");remInput.setAttribute("type","number"),remInput.className="xxxxxx_rem-input_xxxxx",remInput.id="rem-input",remInput.placeholder=0,remLabel.appendChild(remInput);const remCopy=document.createElement("button");remCopy.setAttribute("type","button"),remCopy.className="xxxxxx_rem-copy_xxxxx",remCopy.id="rem-copy",remCopy.innerHTML=copyIcon,remCopy.title="Copy Rem",remCopy.onclick=()=>{copyText(`${remValue.value}rem`)},remLabel.appendChild(remCopy);const inputs=document.querySelectorAll(".xxxxxx_wrapper_xxxxx input"),rootFontSize=window.getComputedStyle(document.documentElement).fontSize.replace("px",""),rootValue=document.getElementById("root-input");rootValue.value=rootFontSize;const pixelValue=document.getElementById("pixel-input");pixelValue.value=10;const remValue=document.getElementById("rem-input");remValue.value=pixelValue.valueAsNumber/rootValue.valueAsNumber,inputs.forEach((e=>{e.addEventListener("keyup",(e=>{e.target===rootValue&&(pixelValue.valueAsNumber=pixelValue.valueAsNumber/rootValue.valueAsNumber),e.target===pixelValue&&(remValue.valueAsNumber=pixelValue.valueAsNumber/rootValue.valueAsNumber),e.target===remValue&&(pixelValue.valueAsNumber=remValue.valueAsNumber*rootValue.valueAsNumber)}))}));const style=document.createElement("style");style.textContent="\n.xxxxxx_wrapper_xxxxx {\n width: 100%;\n letter-spacing:1px;\n background-color: #b9e7de;\n text-align:right;\n font-family:helvetica !important;\n font-weight:100;\n padding-inline: 60px;\n color:#161613;\n margin:auto;\n position:fixed;\n top:0;\n right:0;\n left:0;\n z-index:2147483647;\n font-size:18px;\n text-rendering:optimizeLegibility;\n text-align:center;\n display: flex;\n justify-content: center;\n gap: 2rem;\n padding-block: 10px;\n}\n\n.xxxxxx_close_xxxxx {\n position: absolute;\n left: 0;\n top: 0px !important;\n background-color: #edece8 !important;\n color: black !important;\n z-index: 30;\n padding: 8px !important;\n font-size: 18px !important;\n height: 100% !important;\n cursor: pointer !important;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 0;\n font-weight: normal !important;\n border-right: 2px solid black;\n\n &:hover {\n background-color: #fff !important;\n }\n}\n\n.xxxxxx_wrapper_xxxxx label {\n padding-left: 8px;\n border-top: 2px solid #333;\n border-left: 2px solid #333;\n border-bottom: 2px solid #333;\n background-color: #eee !important;\n font-family: monospace !important;\n letter-spacing: 0.5px;\n display: flex !important;\n align-items: center !important;\n flex-wrap: wrap !important;\n margin: 0 !important;\n font-size: inherit !important;\n}\n\n.xxxxxx_wrapper_xxxxx input[type='number'] {\n padding: 3px 6px;\n border-top: 0;\n border-bottom: 0;\n border-right: 2px solid #333;\n margin-left: 8px;\n font-size: inherit;\n height: auto !important;\n color: black !important;\n background-color: #fff !important;\n border-radius: 0 !important;\n -moz-appearance:textfield;\n}\n\n.xxxxxx_wrapper_xxxxx input + button {\n height: 100%;\n border: 0;\n padding: 0;\n margin: 0;\n cursor: pointer;\n border-right: 2px solid #333;\n background-color: #6b6b6b !important;\n display: flex !important;\n align-items: center !important;\n}\n\n.xxxxxx_wrapper_xxxxx input::-webkit-outer-spin-button,\n.xxxxxx_wrapper_xxxxx input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n}\n.xxxxxx_wrapper_xxxxx input::placeholder {\n font-weight: bold;\n color: inherit;\n}\n",container.appendChild(style);}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment