Develop Reference

How to calculate font-size to fit a container?

I need to fit variable amounts of text into rectangle divs of variable sizes, which are themselves responsive (using vw/vh).
There are hundreds of divs which all have a different size, and I don't know it in advance: it is calculated from original dimensions in centimeters, in order to keep their aspect ratio. Each div has text inside, which should fit to the container (not perfectly, just no overflow). Usually there is a lot of text overflowing, but I can't have a scrollbar, the text should fit the container.
A few things to keep in mind:
the divs aspect ratio must be preserved
linebreaks of the text must be preserved
it does not matter if the text is too small to be legible
So far I've tried to adapt the font-size with viewport units. The problem is that the font-size will be different for each div. I would need some equation to calculate the font size based on the amount of text and/or size of the container.
Here are a few examples: https://codepen.io/gramm/pen/VJPavg
div#tm12901 {
width: 15.952380952380954vh;
height: 50vh;
font-size: 0.8vh;
line-height: 1.5;
background: Pink;
}
I've also tried to detect overflow, but so far with no success (it's probably easy to do and I just don't have the js knowledge).
Another example: https://codepen.io/gramm/pen/MMJpdb
//trying to detect overflow
$('.text').each(function(){
if($(this).clientHeight < $(this).scrollHeight){
console.log('overflow detected!');
}
});
Is there a better method: calculate font-size, or detect overflow? And do you have any pointers to help with either method?
For the detect-overflow method, would it be a problem that the divs will change size each time the window is resized?

How to obtain clientWidth & clientHeight before DIV is visible

I want to obtain the dimensions of a DIV element (used to display a popup menu at the cursor position) while it's style.display='none;', however the dimensions of the DIV always return 0. The only way I seem to be able to get the dimensions is to make the DIV style.display='block;' at 0,0 and then move it to the required position, but that looks jumpy.
I've tried making the DIV visible outside of the visible screen area but that doesn't work. Is there a way to get the clientWidth and clientHeight values whilst the DIV is hidden?

If your DIV is not visible, you won't be able to get its dimensions.
However, there is a workaround. Your div has to be "visible", but that doesn't mean it's opacity and position have to be 1 and relative.
Set the opacity to 0 and the position to "absolute" and you'll be able to get the DIV dimensions.
EDIT
Since I think more people will have a similar problem, I feel I should explain my answer a little more.
If you try to get the size of a hidden element with JavaScript, you will always get 0.
So there are techniques to get the real size without displaying the element to the user. My favourite is the one I already wrote about above. Here are the more detailed steps:
you set the elements opacity to 0. This way it won't be displayed to the end user while you are getting the dimensions.
you set the element position to "absolute". This way it won't take up any space.
now it's safe to set the display to "inline-block".
you read the elements dimensions. This time you'll get the real values.
You set the display back to "hidden" and set the opacity and position back to its original values.
And now you have the size of a hidden element.

If you'd like to know the size of an element onscreen without it being visible you need it to be painted to the screen but not shown.
In order to get clientHeight and clientWidth you need it to be rendered so the calculations can be performed based on the screens current state (unless you have pre-programmed width and height, which I'm guessing you don't)
you can find out more information at MDN here
So you have options:
create your div offscreen using positioning (fixed or absolute) combined with z-index or opacity
use width: 0 and height: 0 and overflow: hidden then use scrollHeight and scrollWidth to find the overflow size
choose which option is best for your site, considering things like responsiveness and screen reflows and repaints

If container width, padding and line-height is known, how to calculate height?

I am adding element dynamically to DOM.
$('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);
I want to get element height before it is added to DOM. The usual approach is to add the element within a hidden element with the same style and then simply see what is the height.
Though, is it imposible to calculate element height if you know container's width, padding and line-height (content is only plain-text) and content?

How the content wraps inside a container may depend on browser and zoom level, so unless you're very sure the content will never wrap, I would advise determining the height the way you have described.

If your text font is mono-sized-font, yes you can calculate it with formula [(text-length/(width/char-width))], but I'm sure you are not using mono-sized-font like courier, monospace etc.
Answer is this : there is no way to do this with multi-sized-fonts, me sorry.

Can element width/height be less than min-width/min-height?

I have defined min-width for div elements (float:left). I set their actual width from JavaScript based on window size using $('div.element').css('width','123')
This arrangement works well most of the time but breaks when the browser introduces a vertical scroll-bar, resizing the elements to less than min-width.
Can the elements be re-sized to less than min-width from JavaScript by changing just their width?

You should not be able to change an element's width to less than its specified min-width value. Here is a jsfiddle showing how this works, click on the divs to see their width after having it set in JavaScript: http://jsfiddle.net/jasper/sPen2/1/

How to detect if a text-field needs to wrap in JavaScript/dojo?

I have a textfield in a grid in which I wish to turn off text wrapping, but display a tooltip with the full text if wrapping is required. So, how could I detect if a field needs to wrap?
I tried to query the field's length, but it was either in em or in px based on if the user resized it. How could I get the wrapping status?

An option to detect if the text wraps - create (with jQuery, for instance) an invisible span with the same font settings and white-space: nowrap, set it's text to the field's content and check if the span's width is bigger than the field's width (in pixels, obtained via width())
Working fiddle: http://jsfiddle.net/TR98y/1/

Perhaps you can check the height (via scrollHeight) of the text container. It should increase when things start wrapping.
The only other alternative I can think of is setting overflow-x:hidden and then dettecting the overflow somehow.