Calculate text width with JavaScript
Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.
var fontSize = 12;var test = document.getElementById("Test");test.style.fontSize = fontSize;var height = (test.clientHeight + 1) + "px";var width = (test.clientWidth + 1) + "px"
console.log(height, width);
#Test{ position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; /* Thanks to Herb Caudill comment */}
<div id="Test"> abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
How to get text width and height inside a TextArea in HTML using JavaScript?
EDIT:
To calculate the width of an arbitrary string you could use this approach:
var fontSize = 12;var widthTest = document.getElementById("widthTest");widthTest.style.fontSize = fontSize;var height = (widthTest.clientHeight + 1) + "px";var width = (widthTest.clientWidth + 1) + "px"
console.log(height, width);
#widthTest{ position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; }
<div id="widthTest"> FooBarEatsBarFoodBareFootWithBarFoo</div>
Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Calculate text font size to fill container with text
I have played around a little bit and it seems to me that I found the solution. The algorithm is modified in the following way:
- at first you need to find old font size for the target element and all its children (not only first layer)
- then you need to calculate a coefficient, i.e. how much the font size should be changed, the calculation of the coefficient should be done in parallel with the new font size calculation
- and apply that coefficient to the final font size of target and for all of its children
here is the working DEMO
UPDATE
here is the solution that you need, the previous one does a little bit more than you need, I just want to keep it, maybe others will find it helpful. I want also to notice the this second solution is very similar to the first one except the coefficient part, which is unnecessary is this case.
How to calculate the width of a text string of a specific font and font-size?
You can do exactly that via the various sizeWithFont:
methods in NSString UIKit Additions. In your case the simplest variant should suffice (since you don't have multi-line labels):
NSString *someString = @"Hello World";
UIFont *yourFont = // [UIFont ...]
CGSize stringBoundingBox = [someString sizeWithFont:yourFont];
There are several variations of this method, eg. some consider line break modes or maximum sizes.
Should I size a textarea with CSS width / height or HTML cols / rows attributes?
I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.
The recommended way to do it is via an external stylesheet e.g.
textarea { width: 300px; height: 150px;}
<textarea> </textarea>
How to get text width inside textarea? (javascript/jquery)
It's well possible this information is impossible to get hold of.
Workaround idea:
- Create a
span
element with the font size settings of the textarea - Give the span element the input's value using
.text(value)
- Measure the span's width
Related Topics
System.Exit(0) Doesnt Close All My Activities
Which Websocket Library to Use in Android App
Fragment in Viewpager Using Fragmentpageradapter Is Blank the Second Time It Is Viewed
Closing the Database in a Contentprovider
Swipe to Dismiss for Recyclerview
Android - Best and Safe Way to Stop Thread
Is Using Serializable in Android Bad
Android: Automatically Choose Debug/Release Maps API Key
Google Maps API V2 Draw Part of Circle on Mapfragment
Answer Incoming Call Using Android.Telecom and Incallservice
Volley Android Networking Library
Super.Oncreate(Savedinstancestate);
Android: Under What Circumstances Would a Dialog Appearing Cause Onpause() to Be Called
Android Download Manager Completed