krh/muuhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

things+stuff

Browse Source
This commit is contained in:
Kim Ravn Hansen
2025-09-10 12:36:42 +02:00
parent 5d0cc61cf9
commit ba293d08b3
39 changed files with 3425 additions and 2713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
server/find-element-width-in-chars.html
View File

@@ -3,48 +3,46 @@
<!-- 2. Get the width of a single character in the monospaced font (this can be done by creating a temporary element with the same font and measuring its width).-->
<!-- 3. Divide the container's width by the character's width to get the number of characters. -->
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Measure Div Width in Characters</title>
<style>
.monospaced-div {
font-family: "Courier New", Courier, monospace; /* Monospaced font */
width: 360px; /* Example width in pixels */
border: 1px solid #333;
padding: 10px;
}
</style>
</head>
<body>
<div class="monospaced-div">
This is a div with monospaced text.
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Measure Div Width in Characters</title>
<style>
.monospaced-div {
font-family: "Courier New", Courier, monospace; /* Monospaced font */
width: 360px; /* Example width in pixels */
border: 1px solid #333;
padding: 10px;
}
</style>
</head>
<body>
<div class="monospaced-div">This is a div with monospaced text.</div>
<script>
function getMonospacedCharCount(div) {
// Create a temporary span to get the width of one character
const testChar = document.createElement('span');
testChar.textContent = '0'; // Monospaced fonts use "0" for width
testChar.style.fontFamily = window.getComputedStyle(div).fontFamily;
testChar.style.visibility = 'hidden'; // Hide the element
document.body.appendChild(testChar);
<script>
function getMonospacedCharCount(div) {
// Create a temporary span to get the width of one character
const testChar = document.createElement("span");
testChar.textContent = "0"; // Monospaced fonts use "0" for width
testChar.style.fontFamily = window.getComputedStyle(div).fontFamily;
testChar.style.visibility = "hidden"; // Hide the element
document.body.appendChild(testChar);
const charWidth = testChar.offsetWidth; // Get width of a single character
document.body.removeChild(testChar); // Remove the test element
const charWidth = testChar.offsetWidth; // Get width of a single character
document.body.removeChild(testChar); // Remove the test element
// Get the width of the div and calculate how many characters fit
const divWidth = div.offsetWidth;
// Get the width of the div and calculate how many characters fit
const divWidth = div.offsetWidth;
// Return the number of characters that fit in the div width
return Math.floor(divWidth / charWidth);
}
// Return the number of characters that fit in the div width
return Math.floor(divWidth / charWidth);
}
const div = document.querySelector('.monospaced-div');
const charCount = getMonospacedCharCount(div);
console.log('Number of characters the div can hold:', charCount);
</script>
</body>
const div = document.querySelector(".monospaced-div");
const charCount = getMonospacedCharCount(div);
console.log("Number of characters the div can hold:", charCount);
</script>
</body>
</html>