Is this possible to calculate height of the text BEFORE it is inserted into DOM?
Width of the div container is known, but I need a way to calculate its height before it is inserted.
The heights of the one line of text is also known (css), so the height could be calculated by multiplying the height of one line by the amount of lines, but the question is if this is possible to calculated BEFORE it's DOM.
Since your question explicitly requires the text not to be inserted into the dom this precludes the usually used method of simply inserting it outside the viewport and then measuring there.
An alternative approach: The canvas 2D rendering context's measureText function which can be used to determine the width if you know which styling (font width) will apply in advance.
Some advanced CSS rules such as letter-spacing may make those results inaccurate.
Related
I need to fairly accurately determine the height of the height of the text in my svg elements, unfortunately everything i try to use bounding box and the height i get from this, it's always returns a height that is too big at bigger fonts.
Is there a way to get a more accurate measurement of text height one that is more dependent on the text within my elements.
Essentially, if its container's dimensions are m x n, I want to set an element's dimensions to min(m,n) x min(m,n).
I've seen similar questions asked here before, but the answers all seemed to assume that the container's width would be greater than its height - something that is not guaranteed in my scenario.
At the moment I'm calculating it with JavaScript, but I'd prefer a pure CSS solution. I originally thought I could do something with media queries using the "orientation" property, but I think media queries can only refer to overall viewport, and not a specific element? So that wouldn't work.
Is this possible in pure CSS?
I am trying to learn and make a reference for myself but i can't find correct, enough, and not so confusing information. So tell me how to find the width of these..
Assume there is DOM element with 10px padding all around, border 5px all around, margin 30 px all around, and content that is too long for it so has scroll bars.
Find widths using javascript...
upto Margin.
upto Border.
Inside Border Padding and plus vertical scroll bar if present.
upto padding excluding vertical scrollbar if present.
upto content only that is visible. (no scrollBar, padding, border, margin, extra content)
upto content that's visible and hidden in scrollable area and with padding
upto content that's visible and hidden in scrollable area and with out padding
Javascript as too many unintuitive catches so please make it clear once and for all.
So far I have gotten this:
unknown
element.offsetWidth
unknown
element.clientWidth
unknown ( css width ?)
element.scrollWidth (see below)
unknown
only workarounds that i know are using lots of javascript to get computed values and then calculate all of these manually..but maybe there are builtin functions or better way to find things.
more Problems:
scrollWidth includes only left padding..shouldn't it either include both or none or at least have other options that do. LINK
box Sizing to border box changes the whole world and every question above needs to be answered again for that. For example for 5 css width property won't be true anymore.
There is no one function that will solve what you're asking for.
.outerWidth() will give the the size of an element, padding, borders, contained content and all. It will not however give you the margin of the element. Using the .outerWidth(true) parameter will give you the width of the element including the margin.
.innerWidth() will give you the width of the element. It is the total width of the content in the element plus the padding, but not the border,
If for some reason you want to know the difference between the inner and outer widths. Which is pretty much the border width or the difference between the edge of the border and the margins just subtract them from one another.
$widthDif = outerWidth(."Somethng") - .innerWidth('.something');
The inner and outer width function are mirrored and work the exact same for height.
Generally if you use .innerWidth() on something like the main body element it returns the width of the document minus the scroll bar because the scroll-bar is not part of the content view port.
Inside of an element is another story.
Best thing I could find in a google search was another StackOverflow question. Which outline rendering and element to 100% width inside of the scrollable element, getting its width and then deleting the element since it is unneeded. Getting the height of something minus a horizontal scrollbar could be found the same way. However once you have a vertical and horizontal scrollbar at the same time things could/would get complicated because the 100% height or width element could expand beyond what is in the view-able space depending on how the content is rendered into the element with the scrollbars.
I am writing an application, and in it, I would like to have some h1 elements with variable font size.
I use the full width (1000px) of a div as a limiter, and a script that automatically sets the font of the h1-element so that it fits the width of the div without line break.
This is quite easy to do with php GD, but I thought I wanted to do this client side.
See the TextFill jQuery plugin that was created as part of the answer to Auto-size dynamic text to fill fixed size container
I don't think there is a pre-built function for this. I guess you'll have no choice but to run a loop and resize the element until it fits.
It could work like this:
Create a clone of the DIV, with jQuery e.g. element = $('element_id').clone()
Set the clone's font-size to 1
Build a loop that
Increases font-size by one pixel
Checks whether the desired width has been reached
If it has, breaks the loop
the font-size in the cloned element will then be the closest match for your desired width.
Update: The plugin referenced in #Pär's answer does exactly this.
This seems like a pretty natural use case to me, though I haven't been able to find anything on it:
Say I have a fixed-width div that is dynamically populated with some number. What's the best way to ensure that numbers with more digits take smaller font sizes such that they fit nicely into that fixed width? Is there some CSS property for this, or do I have to resort to Javascript hackage?
There is no CSS property which automatically adjusts font-sizes based on a fixed container. You will have to resort to javascript.
You could put each number in a span, and loop over each span checking its width. If the width is greater than the fixed width, bump the font-size down and then check the width again. Keep on lowering the font-size until the span's width is less than the fixed width.
To prevent flickering, you should perform this loop checking while the fixed div is visible, but placed off page (such as "position: absolute; left: -5000px;")
Css does not do this, but you might want to give these scripts a go: http://www.zachleat.com/web/fittext-and-bigtext/