populate a static div with a monospaced font

Question

populate a static div with a monospaced font

Consider a scenario where you have a string of characters and an HTML div element with a fixed size. How many characters from the string can fit into the div without wrapping when using a monospace font and a specified fixed font size? In addition, is there a way to adjust the font size slightly so that the text takes up the entire width of the container?

JavaScript

var s = "skjhfkjsdhjfksdhjkghskjgh...";

CSS

#c { width:267px; font-size:30px; font-family:monospace }

HTML

<div id="c"></div>

Check out this fiddle for a workaround solution that seems to work but may not be the most optimal: https://jsfiddle.net/6et20853/1/

javascript html css fonts

Answer 1

Answer №1

To get the width of one character, you will need to use .getBoundingClientRect on an element that contains a single monospace character:

oneCharWidth = document.querySelector('#testing').getBoundingClientRect().width;
console.log(oneCharWidth)

<span id="testing" style="font-family: monospace">a</span>

If you want to determine the font size needed for a string of text to fit a container with a fixed size:

var widthOfContainer = 400, // The width of the container in pixels
    textLength = "Hello world!".length, // The text to fit
    testElem = document.querySelector('#testing'),
    widthOfChar,
    fontSize = 100; // Initial guess (exaggerated to find optimal value)

do {
  fontSize--;
  testElem.style.fontSize = fontSize + 'px';
  widthOfChar = testElem.getBoundingClientRect().width;
} while (textLength * widthOfChar > widthOfContainer);

var container = document.querySelector('#container');
container.style.fontSize = fontSize + 'px';

testElem.parentNode.removeChild(testElem); // Remove #testing element

#container {
  border: 1px solid red;
  font-family: monospace;
  width: 400px;
}

#testing {
  font-family: monospace;
}

<div id="container">Hello world!</div>
<span id="testing">a</span>

Answer 2

To get the width of one character, you will need to use .getBoundingClientRect on an element that contains a single monospace character:

oneCharWidth = document.querySelector('#testing').getBoundingClientRect().width;
console.log(oneCharWidth)

<span id="testing" style="font-family: monospace">a</span>

If you want to determine the font size needed for a string of text to fit a container with a fixed size:

var widthOfContainer = 400, // The width of the container in pixels
    textLength = "Hello world!".length, // The text to fit
    testElem = document.querySelector('#testing'),
    widthOfChar,
    fontSize = 100; // Initial guess (exaggerated to find optimal value)

do {
  fontSize--;
  testElem.style.fontSize = fontSize + 'px';
  widthOfChar = testElem.getBoundingClientRect().width;
} while (textLength * widthOfChar > widthOfContainer);

var container = document.querySelector('#container');
container.style.fontSize = fontSize + 'px';

testElem.parentNode.removeChild(testElem); // Remove #testing element

#container {
  border: 1px solid red;
  font-family: monospace;
  width: 400px;
}

#testing {
  font-family: monospace;
}

<div id="container">Hello world!</div>
<span id="testing">a</span>

populate a static div with a monospaced font

Answer №1

Similar questions

"Using JSoup on an Android app to extract the content within specific HTML tags and display each one on its

Setting the initial stage color in Konva can be done by using the `stage.fill

Using HTML in emails to enhance the visual appeal: a table cell with an image next to a table

Searching for a user's first name and last name in mongoDB and retrieving the entire object

Encountered a Next-Auth Error: Unable to fetch data, TypeError: fetch failed within

Having trouble getting the dropdown button to function properly in my Bootstrap navigation bar implementation

What is the process of invoking a Java method through AJAX on a website?

Applying unique textures to individual sides in Three.js

Begin by positioning flex elements outside of the screen and then animate them into their final

Performing an HTTP GET Request with HTML/JavaScript and JQuery

Utilizing JavaScript to extract an image from one div and seamlessly transfer it into another div

The behavior of relative paths in Ajax can vary depending on the environment in which it

What is the process for modifying input text and saving it for future use?

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

Is it possible to have a variable either inside quotation marks or NULL when checking for case within a string in JavaScript

Incorporate additional plugins into React-Leaflet for enhanced functionality

CSS: Aligning content vertically centered

Several validation checks - logic malfunction

Converting a two-dimensional array into a collection of sparse arrays

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?