How to get the real height of a text? - javascript

Referring go this example
http://jsfiddle.net/uzgJX/
The result is the height of the box containing the text (the one you can see if you select the text with the mouse..) wichi is higher then the real height of the text.
Is there a way to get the real height with jquery or plain js?
In the example I tryed with
text.height()
and
text[0].getBoundingClientRect().height
with no luck, it says 19px instead of 14px

Get the computed font-size for your text element instead:
parseInt(window.getComputedStyle(text[0]).fontSize, 10);
font-size represents the size of an em square for a font. It should be noted that, while most glyphs will stay inside the bounds of an em square, some may exceed those bounds. This doesn't usually occur on the vertical dimentions, though.
Give it a try: http://jsfiddle.net/uzgJX/1/. Tip: screenshot and copy into your favourite image editor, then select the pixels exactly to the height of the text and compare with the value given in the fiddle.

Related

how to reset bbox data of raphael text element

I'm trying to change the bbox data of raphael elements but it doesnt work.
I try to set
textElement.attr("text","1");
but it looks like to hold latest widest text width, what i assume to shrink bbox values to smaller text.
Obviously i'm missing something.
Raphael doesn't give you any control over elements' bounding boxes. Font elements' bounding boxes are limited to the width of the text. If you want to change the font size, just use the font-size attribute:
textElement.attr("font-size","12");

How to create CSS/JavaScript circles grid

I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.

How to get position of top of text itself, rather than text element, in jQuery/javascript

I'm not sure if this is possible, but here goes:
I want to find the y co-ordinate of some text. For my purposes, the y co-ordinate of the element containing that text does not suffice. Here's why:
http://jsfiddle.net/3kh3p/
In the above jsfiddle are two characters, one in Georgia, one in Verdana. They are both positioned absolutely with top:0. As you can see, the Verdana character begins at a lower point than the Georgia character.
I need to get the y co-ordinate of the text itself, fairly accurately, because I am using that value to write text to an image using PHP's imagettftext function, and being 5 or 10 pixels out is not OK.
Is there a way?
The only way I can think of would be to draw the text (fillText) into a canvas element, and then query the element's pixel data (getImageData and such) to find out where a given character actually starts vertically according to whatever criteria you want to use (e.g., do you want to ignore upward serifs or not, etc.). Not for the faint of heart, if there's any other way to achieve your overall goal, I'd look elsewhere.

Convert HTML element non-px dimensions to px in (IE issue)

I'm trying to get border width of a particular element.
Getting border width style setting is pretty easy by simply reading if from current calculated style of an element:
var styles = (
document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(de, null) :
de.currentStyle
);
Reading a particular border value is then rather simple by:
var top = styles.borderTopWidth;
var value = parseFloat(top);
This is all fine and dandy (as long as you don't use IE) and I can get top border width in the value variable. But this number relates to pixels only when border width was set in pixels. If it wasn't (was em for instance) than value has the number of that particular dimension.
I have to get an answer to any of these two questions:
How do I always get border width in pixels?
How do I calculate different units into pixels?
Example
I've prepared a jsFiddle example where you can see various dimensions reported by DOM and jQuery. Run it in different browsers and you'll see the difference in IE. All dimansions in Crome are in integer values while Firefox calculates margin and padding in floats while border in integers.
BTW: Margin, border and padding are all set to 2mm.
Most libraries solve this problem for you, as does YUI3 for example.
If you don't want to use those libraries, then at least you can peak at how they do it ;)
http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html
Awnser contained therein.
You can generally get computed pixel sizes using element.offsetWidth and element.offsetHeight. This is somewhat sensitive if you want to support a range of browsers. In that case, use a library. For example, using jQuery you can get guaranteed pixel dimensions with something like this: jQuery("#theID").width().

Truncate a label: find out when text overflows a 2-row 400px-long label

I have a (fixed-width and height) label which sums up a long list of selection criteria, and the specs say that, if label content exceeds 2 lines # 400px, it should be trimmed, an ellipse should be added, and the rest should be displayed in a hovered div on mouseover, à la tooltip. I'd like some advice on which is the best way to pick the trim point.
So far, I only have two ideas, and I'm not terribly happy with either of them:
I guesstimate truncation, based on content length; I find this is particularly unwise, since (1) I'm using proportional fonts, and (2), this being a two-line text, wraparound can easily make a mess of it.
I use a second, hidden label, and get width in javascript. Slightly better, but would disagree with wraparound, since the hidden label would be 1 line only.
Whatever solution I end up implementing, I'll probably have to do this strictly in JavaScript.
Is it not possible to hide a label and then set its width to 400px?
Then you could just measure height on the hidden label, and keep removing letters until its down to only two lines, the would give you the number of letters to keep in the original label.
But maybe styling goes out the window when the label is hidden? Im not sure.

Categories

Resources