Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible.
For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large. If they enter a paragraph, the font will be smaller.
Starting with a maximum font size of maybe 32px, the script would shrink the font size while the text is too big to fit in the container, ensuring it always fits perfectly.
After exploring various options, I arrived at the following solution:
You can find the plugin by following this link: https://plugins.jquery.com/textfill/
Additionally, here is a link to the source code:
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
When it comes to my HTML structure, it looks like this:
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
After experiencing unsatisfactory performance with existing solutions, I decided to create my own approach using basic mathematics instead of loops. This method should function effectively across all browsers.
Based on results from a performance test case, it appears that this solution is significantly quicker than others mentioned here.
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier-0.1));
ourText.css(
"fontSize",
(maxFontSize > 0 && newSize > maxFontSize) ?
maxFontSize :
newSize
);
});
};
})(jQuery);
If you're interested in contributing, the code has been added to this Gist.
While I appreciate the occasional upvotes for this answer, it may not be the best solution to the problem at hand. I encourage you to explore some of the other fantastic answers provided here, especially those that offer solutions without the need for loops.
Nevertheless, for reference, here is my original response:
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>
Below is an alternative version featuring the use of classes:
<html>
<head>
<style type="text/css">
.dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textDivs = document.getElementsByClassName("dynamicDiv");
var textDivsLength = textDivs.length;
// Loop through all instances of dynamicDiv on the page
for(var i=0; i<textDivsLength; i++) {
var textDiv = textDivs[i];
// Find the dynamicSpan within each dynamicDiv
var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];
// Apply similar logic as before
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
}
</script>
</head>
<body onload="shrink()">
<div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>
Many responses rely on a loop to adjust the font size until it fits within the div, but this method is extremely slow as it forces the page to constantly redraw the element after each font change. To address this issue, I developed my own algorithm that optimizes performance by allowing periodic content updates without causing the user's browser to freeze. Additionally, I incorporated additional features such as text rotation and padding, which I packaged into a jQuery plugin available for download at:
https://github.com/SophiaSmith/jquery-bigtext
To implement this plugin, simply use the following code snippet:
$("#text").bigText();
This will ensure that your text fits neatly inside the designated container.
To witness the plugin in action, visit:
While the current version has certain limitations - requiring fixed height and width parameters for the div and lacking support for wrapping text across multiple lines - I am actively working towards offering an option to establish a maximum font size setting.
Update: Upon further testing, I discovered some issues with the plugin, particularly its inability to accommodate box-model variations beyond the standard format, as well as restrictions regarding margins and borders on the containing div. Rest assured, these matters are being addressed.
Another Update: The aforementioned problems and constraints have been resolved, and new features have been added. Users can now specify a maximum font size and choose to limit sizing based on width, height, or both criteria. Efforts to incorporate max-width and max-height values within the wrapper element are underway.
Yet Another Update: Version 1.2.0 of the plugin has been released, featuring extensive code refinement, additional customization options (verticalAlign, horizontalAlign, textAlign), and enhanced support for inner elements within the span tag (e.g., line breaks or font-awesome icons).
This response is inspired by GeekyMonkey's original post, but has been tweaked with some adjustments.
; (function($) {
/**
* Adjust the size of inner element to fit within the boundaries of the outer element
* @author Tweaked by Sandstrom
* @author Code derived from previous works by Russ Painter (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="461123240223352f2128060123232d3f0b29282d233f6825292b">[email protected]</a>)
* @version 0.2
*/
$.fn.textfill = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // default to current font-size
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// calculate total height of all children elements, like multiple <p> tags.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes uniform width for all inner elements
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
})(jQuery);
Presented here is an enhanced looping technique that leverages binary search to determine the largest suitable size that can fit into the parent container with minimal steps (this approach is more efficient and precise compared to incrementing by a fixed font size). The code has been fine-tuned for improved performance.
By default, the algorithm executes 10 binary search iterations to achieve sizing accuracy within 0.1% of the optimal value. Alternatively, adjusting the numIter parameter to a value N allows precision up to 1/2^N of the optimum size.
You can utilize this functionality with a CSS selector like so: fitToParent('.title-span');
/**
* Adjusts the font-size attribute of all elements matching a specified
* CSS selector to maximize their dimensions within their respective parent
* containers. Utilizes binary search for optimization.
*/
var fitToParent = function(selector) {
var numIter = 10; // Number of binary search iterations
var regexp = /\d+(\.\d+)?/;
var fontSize = function(elem) {
var match = elem.css('font-size').match(regexp);
var size = match == null ? 16 : parseFloat(match[0]);
return isNaN(size) ? 16 : size;
}
$(selector).each(function() {
var elem = $(this);
var parentWidth = elem.parent().width();
var parentHeight = elem.parent().height();
if (elem.width() > parentWidth || elem.height() > parentHeight) {
var maxSize = fontSize(elem), minSize = 0.1;
for (var i = 0; i < numIter; i++) {
var currSize = (minSize + maxSize) / 2;
elem.css('font-size', currSize);
if (elem.width() > parentWidth || elem.height() > parentHeight) {
maxSize = currSize;
} else {
minSize = currSize;
}
}
elem.css('font-size', minSize);
}
});
};
A unique AngularJS directive has been developed, drawing heavy inspiration from GeekyMonkey's solution but eliminating the jQuery dependency.
Check out the Demo: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
Here's the Markup:
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>Implementing the Directive:
app.directive('fittext', function() {
return {
scope: {
minFontSize: '@',
maxFontSize: '@',
text: '='
},
restrict: 'C',
transclude: true,
template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
controller: function($scope, $element, $attrs) {
var fontSize = $scope.maxFontSize || 50;
var minFontSize = $scope.minFontSize || 8;
// text container
var textContainer = $element[0].querySelector('.textContainer');
angular.element(textContainer).css('word-wrap', 'break-word');
// max dimensions for text container
var maxHeight = $element[0].offsetHeight;
var maxWidth = $element[0].offsetWidth;
var textContainerHeight;
var textContainerWidth;
var resizeText = function(){
do {
// set new font size and determine resulting dimensions
textContainer.style.fontSize = fontSize + 'px';
textContainerHeight = textContainer.offsetHeight;
textContainerWidth = textContainer.offsetWidth;
// shrink font size
var ratioHeight = Math.floor(textContainerHeight / maxHeight);
var ratioWidth = Math.floor(textContainerWidth / maxWidth);
var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
fontSize -= shrinkFactor;
} while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);
};
// watch for changes to text
$scope.$watch('text', function(newText, oldText){
if(newText === undefined) return;
// text was deleted
if(oldText !== undefined && newText.length < oldText.length){
fontSize = $scope.maxFontSize;
}
resizeText();
});
}
};
});
I came across a script by Marcus Ekwall, which I forked from and made some adjustments to suit my needs. Now, the script triggers when the window is resized, ensuring that the child element always fits its container perfectly. Below is the modified script for your reference.
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this);
function resizefont(){
var parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier));
ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
}
$(window).resize(function(){
resizefont();
});
resizefont();
});
};
})(jQuery);
Here is my revised version of the original answer provided by the OP.
In summary, many individuals who attempted to enhance this raised concerns about a loop being utilized. While loops may be sluggish, alternative methods could result in inaccuracies.
Therefore, I have implemented a Binary Search approach to determine the optimal Font Size:
$.fn.textfill = function()
{
var self = $(this);
var parent = self.parent();
var attr = self.attr('max-font-size');
var maxFontSize = parseInt(attr, 10);
var unit = attr.replace(maxFontSize, "");
var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
var fontSize = (maxFontSize + minFontSize) / 2;
var maxHeight = parent.height();
var maxWidth = parent.width();
var textHeight;
var textWidth;
do
{
self.css('font-size', fontSize + unit);
textHeight = self.height();
textWidth = self.width();
if(textHeight > maxHeight || textWidth > maxWidth)
{
maxFontSize = fontSize;
fontSize = Math.floor((fontSize + minFontSize) / 2);
}
else if(textHeight < maxHeight || textWidth < maxWidth)
{
minFontSize = fontSize;
fontSize = Math.floor((fontSize + maxFontSize) / 2);
}
else
break;
}
while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);
self.css('font-size', fontSize + unit);
return this;
}
function resizeText()
{
$(".textfill").textfill();
}
$(document).ready(resizeText);
$(window).resize(resizeText);
This method also enables the element to define the minimum and maximum font sizes:
<div class="container">
<div class="textfill" min-font-size="10px" max-font-size="72px">
Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
</div>
</div>
Additionally, this algorithm is dimensionless. You can specify em, rem, %, etc., and it will utilize that for the final output.
Here is the Fiddle link: https://jsfiddle.net/fkhqhnqe/1/
I encountered a similar issue with my website. One of my pages needed to be displayed on various platforms such as projectors, walls, and big screens.
To address the uncertainty around the maximum font size, I decided to utilize a plugin created by @GeekMonkey but with a slight modification to increase the font size:
$.fn.textfill = function(options) {
var defaults = { innerTag: 'span', padding: '10' };
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var ourText = $(Opts.innerTag + ':visible:first', this);
var fontSize = parseFloat(ourText.css('font-size'),10);
var doNotTrepass = $(this).height()-2*Opts.padding ;
var textHeight;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
fontSize = fontSize + 2;
} while (textHeight < doNotTrepass );
});
};
To significantly speed up the proposed iterative solutions, two strategies can be implemented:
1) Increase the font size by a constant factor rather than adjusting it by 1.
2) Begin by approximating with a coarse constant, such as doubling the size in each iteration. Then, refine the approach by applying a smaller adjustment, like multiplying by 1.1. While some may strive for the exact integer pixel size of the perfect font, most individuals won't perceive a difference between 100 and 110 pixels. For perfectionists, repeating the process with an even finer adjustment is an option.
Instead of creating a specific routine or plugin tailored to address a precise query, I prefer to rely on fundamental concepts and generate various versions of the code to tackle diverse layout challenges, not limited to text. This includes resizing divs, spans, images, based on width, height, area, fitting within a container, or matching another element.
Here's an illustration:
var nWindowH_px = jQuery(window).height();
var nWas = 0;
var nTry = 5;
do{
nWas = nTry;
nTry *= 2;
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( jQuery('#divTitle').height() < nWindowH_px );
nTry = nWas;
do{
nWas = nTry;
nTry = Math.floor( nTry * 1.1 );
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( nWas != nTry && jQuery('#divTitle').height() < nWindowH_px );
jQuery('#divTitle').css('font-size' ,nWas +'px');
Check out this version of the approved solution that includes a minFontSize parameter.
(function($) {
/**
* This function resizes the font of an inner element to fill the outer element completely.
* @author Russ Painter <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="065163644263756f6168464163636d6c7e4a68696c627e3968686b">[email protected]</a>
* @author Blake Robertson
* @version 0.2 -- Modified to accept a min font parameter.
*
* @param {Object} Options including maxFontPixels (default=40), innerTag (default='span')
* @return All outer elements processed
* @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
*/
$.fn.textfill = function(options) {
var defaults = {
maxFontPixels: 40,
minFontPixels: 10,
innerTag: 'span'
};
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var fontSize = Opts.maxFontPixels;
var ourText = $(Opts.innerTag + ':visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
});
};
})(jQuery);
If you're looking for a solution to your text resizing needs, consider using FitText.js (check out the GitHub page here). FitText.js offers a more efficient and lightweight alternative to TextFill, making it a great choice for various projects.
In my experience, FitText has proven to be very flexible and reliable, even in projects with specific requirements.
To implement FitText, you can use the following HTML:
<div class="container">
<h1 id="responsive_headline">Your eye-catching title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You can also customize FitText by setting options like minimum and maximum font sizes:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
Don't forget to add some CSS styling:
#responsive_headline {
width: 100%;
display: block;
}
And if you prefer a no-jQuery version, FitText also offers an option for that (no-jQuery version available here).
UPDATE: This snippet of code was originally crafted to display notes over an HTML5 video by dynamically adjusting the font size as the video player or browser window is resized. The functionality allowed for notes to be synchronized with the video playback, similar to what we see on YouTube. To achieve this effect, the code utilizes instances rather than direct DOM manipulation.
In response to requests for further clarification, here is the code segment I employed to implement text boxes overlaying an HTML5 video. Although it was written a while back and could use some cleaning up, I won't be revising it at this time since the question has already been resolved and an answer accepted. However, if you wish to simplify the code, feel free to do so!
// Calculating the optimal text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
/* After analyzing various functions through regression analysis, we arrived at the following function
which offers the most suitable font size based on the number of characters and note size.
g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
f(x) = g(letters) * (x / 1000)^0.5
Font size = f(size)
*/
return 8.3 - 2.75 * Math.pow(x, 0.15);
};
var findFontSize = function(x) { // f(x)
return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};
val.setFontSizeListener = function() {
p.style.fontSize = '1px'; // Prevent overflow when measuring text.
var noteStyle = window.getComputedStyle(table);
var width = noteStyle.getPropertyValue('width');
var height = noteStyle.getPropertyValue('height');
var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);
You may need to adjust these values depending on the font-family used. One effective method is to utilize a graph visualizer like GeoGebra. Modify the text length and box dimensions, set the correct size manually, plot the results, then input the equations provided here to fine-tune the numbers until the generated graph aligns with your manual data points.
Just wanted to share a unique approach I came up with for handling contenteditable elements using jQuery.
$.fn.adjustTextSize = function() {
this.each(function() {
let textElement = $(this);
let textNode = this;
let mutationCallback = function(mutationsList, observer) {
if (observer) {
observer.disconnect();
}
textElement.css('font-size', 0);
let desiredHeight = textElement.css('height');
for (let i = 12; i < 50; i++) {
textElement.css('font-size', i);
if (textElement.css('height') > desiredHeight) {
textElement.css('font-size', i - 1);
break;
}
}
var config = {
attributes: true,
childList: true,
subtree: true,
characterData: true
};
let newObserver = new MutationObserver(mutationCallback);
newObserver.observe(textNode, config);
};
mutationCallback();
});
}
$('#contentDiv').adjustTextSize();#container {
display: table;
width: 100%;
}
#contentDiv {
border: 1px solid black;
height: 170px;
text-align: center;
display: table-cell;
vertical-align: middle;
word-break: break-all;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="contentDiv" contenteditable=true>
SAMPLE TEXT
</div>
</div>Implementing binary search with 10 iterations is a more efficient way to adjust font size compared to the naive method of using a while loop and incrementing font size until overflow occurs. By utilizing element.offsetHeight and element.scrollHeight, you can identify when an element starts to overflow.
The flexFont function allows for easy adjustment of font size between 8px and 96px. This solution, after extensive research and testing various libraries, appears to be the simplest and most effective approach.
Additionally, it is possible to modify the function to use offsetWidth and scrollWidth, or integrate both into the process.
// Function to dynamically set font size based on div height
function flexFont(divId) {
var content = document.getElementById(divId);
content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};
// Binary search algorithm to determine optimal font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
if (iterations === 0) {
return lastSizeNotTooBig;
}
var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);
// Implementing binary search based on previous results
if (obj.tooBig) {
(lastSizeTooSmall === -1) ?
determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);
} else {
determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
}
}
// Determines whether font size leads to overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
content.style.fontSize = fontSize + "px";
var tooBig = content.scrollHeight > content.offsetHeight;
return {
tooBig: tooBig,
lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
};
}
I encountered the same issue and found a solution using JavaScript to manage the font size dynamically. Take a look at this example on codepen:
https://codepen.io/TheInnovativeCoder/pen/XKPQjY
While this example focuses on adjusting the height, you may need to consider adding conditions for managing the width.
Try resizing it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: steelblue;" id="container">
<h1 class="quote" id="quotation" style="padding-top: 56px">Too much "darkness" does not dim our paths or bring warmth, instead, it envelops and freezes us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var multiplier = 3;
initial_container_height = document.getElementById("container").scrollHeight;
setInterval(function(){
var container = document.getElementById("container");
var quote = document.getElementById ("quotation");
var message = "WIDTH of container " + container.scrollWidth + "px. "+ quote.scrollWidth+"px. quote \n";
message += "HEIGHT of container " + initial_container_height + "px. "+ quote.scrollHeight+"px. quote \n";
if (quote.scrollHeight < initial_container_height - 30){
multiplier += 1;
$("#quotation").css("font-size", multiplier);
}
console.log(message);
}, 10);
</script>
</html>
I really enjoyed
const quote = "Validating arguments using logic and supporting them with evidence or personal anecdotes."
let initialSize = 20;
let maxCharsPerLine = 60;
let finalSize = Math.min(initialSize, initialSize / (quote.length / maxCharsPerLine));
I have developed a technique to adjust font size without using loops to shrink the text. By calculating the ratio between the container's width and the content width, I dynamically resize the font-size accordingly. For instance, if the container is 1/3 of the content, the font-size will be reduced by 1/3 to fit within the container. To increase the scale, I implemented a while loop that continues until the content exceeds the container's size.
function fitText(outputSelector){
// max font size in pixels
const maxFontSize = 50;
// obtain the designated output element within the DOM
let outputDiv = document.getElementById(outputSelector);
// retrieve the width of the element
let width = outputDiv.clientWidth;
// fetch the width of the content
let contentWidth = outputDiv.scrollWidth;
// retrieve current fontSize
let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
// in case content width surpasses element's width - overflow scenario
if (contentWidth > width){
fontSize = Math.ceil(fontSize * width/contentWidth,10);
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize - 1;
outputDiv.style.fontSize = fontSize+'px';
}else{
// content is smaller than width... incrementally resize the content by 1px till it fits
while (contentWidth === width && fontSize < maxFontSize){
fontSize = Math.ceil(fontSize) + 1;
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize;
outputDiv.style.fontSize = fontSize+'px';
// update widths
width = outputDiv.clientWidth;
contentWidth = outputDiv.scrollWidth;
if (contentWidth > width){
outputDiv.style.fontSize = fontSize-1+'px';
}
}
}
}
This block of code forms a segment of an experimental project which has been shared on Github https://github.com/ricardobrg/fitText/
I recently tried out geekMonkey's solution, but found it to be too slow for my needs. His approach involves adjusting the font size to its maximum value (maxFontPixels) and then checking if it fits within the container. If it doesn't fit, the font size is decreased by 1px and the process is repeated. Personally, I thought: why not just refer to the previous container's height and use that value? (Yes, I understand why this wouldn't work universally, but I came up with a solution that focuses only on the height while also offering minimum and maximum options)
Check out this faster solution:
var index_letters_resize;
(index_letters_resize = function() {
$(".textfill").each(function() {
var
$this = $(this),
height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
$this.find(".size-adjust").css({
fontSize: height
});
});
}).call();
$(window).on('resize', function() {
index_letters_resize();
);
Here is how you can structure the HTML:
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
Just to clarify, this solution solely focuses on the height of the container. Therefore, there is no need to check if the element fits inside. With the added feature of setting minimum and maximum values (40min, 150max), this solution works effectively for me and also adapts to window resizing.
Presented here is an alternative variation of the proposed solution:
adjustTextSizeInElement : function(element, smallestFontSize) {
if(!smallestFontSize) {
smallestFontSize = 6;
}
while(element.offsetWidth > element.parentNode.offsetWidth || element.offsetHeight > element.parentNode.offsetHeight) {
var updatedFontSize = (parseInt(element.style.fontSize, 10) - 4);
if(updatedFontSize <= smallestFontSize) {
break;
}
element.style.fontSize = updatedFontSize + "px";
}
}
I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...
Is there a way to show varying HTML elements or components depending on the device size? In React, you can utilize a package called react-responsive. However, in Next.js, when using this package in a component, server-side rendering does not occur on tha ...
This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...
I encountered a peculiar situation while working with Cucumber: Scenario Outline: Protractor and Cucumber Test InValid Given I have already...... When I fill the <number> .... Examples: | number|... | 3 |... |4 |... Moreover, I ...
While attempting to update Bootstrap from version 4.6.0 to 4.6.2 in a few codebases, I encountered some issues that prevented me from completing the upgrade successfully. The <small> tag and .small CSS class are now displaying larger than before. Ta ...
I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...
My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate ...
Whenever I search for keywords related to my website on Google, the search results show my website's content and address. However, when I click on the link, it redirects me to a different unrelated website. Click here to view an image ...
, I am seeking a solution that goes beyond the repetitive ones provided before. I need to find a more efficient way to achieve my desired outcome based on the code snippet below. In examining the code, it's clear that the first row accommodates 6 ele ...
I came across a helpful page (How to add a custom right-click menu to a webpage?) discussing "How to add a custom right-click menu to a webpage" The source does not provide any functionality to hide the menu. Any suggestions on how I can hide the menu? ...
Looking to shorten the URLs of my webpages hosted on Firebase. The HTML files are located within an "html" folder inside the public directory. Currently, the URL for the index page is: www.lstein-28b62.web.app/htmlfolder/index.html Is there a way to chan ...
I am looking to enhance my form by enabling users to format text, add lists, and more using basic HTML functionality without requiring knowledge of HTML. For example, let's consider the Bold button: <div class="goBold button">B</div> < ...
Currently, I have a script for validating form information that adds a CSS class of .error (which includes a red border) and applies a shake effect when the input value is less than 1 character. Now, I also need to implement this validation on various sel ...
Hello, I am seeking assistance as I have recently begun learning about angularJS. I am working with objects that have keys such as: scope.eventList=[]; for(){ var event = { id : hash, ...
Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...
I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...
In the layerslider, I have a form where users must fill out the current page to move to the next one. Initially, I tried showing and hiding the button, but it confused my users. Now, I am changing the opacity and clickability of the buttons based on page ...
During the development of a website using Foundation 4 framework, I encountered an issue with form dropdowns not displaying correctly on Internet Explorer 8 and older versions. Instead of using Foundation's javascript rendering, they appear as the def ...
I keep getting an error from Lighthouse saying that I am missing both the viewport meta tag and description meta tag Does not have a <meta name="viewport"> tag with width or initial-scaleNo `<meta name="viewport">` tag found ...
Since discovering semantic-ui a few days ago, I've been impressed and have decided to switch my app from Bootstrap 3 to semantic-ui. I could use some assistance here. I'm attempting to split the body of the page into two parts. I would like the ...