How to measure italic font overhang in javascript - javascript

I need to calculate italic text overhang in javascript. Here you can find picture what it means: ms knowledge base. I used the following link in order to calculate text width:
Calculate text width with Javascript.
I added mock div and measured text width, but the problem is that last symbol is sloped and if I use text width for right alignment last symbol upper part is outside of the desired box. I wonder if it's possible to calculate italic text angle of slope or the distance of the overhang in order to subtract this value and to get my text properly aligned in the box?

Related

Move dynamic text box higher, if it wraps, to stop it from covering up the next text box below or

I have two dynamic text boxes placed above each other. Sometimes the first text box wraps into two lines which means it covers up the second text box. How can I detect the first text box has wrapped into two lines and if so, move the text box little higher (I can't move 2nd text box and first text box has some space above it that can be used).
Thanks
You can get the bounds of the text.
var bounds = text1.getBounds();
// Note, add in bounds.y to account for the text baseline
text2.y = text1.y + bounds.y + bounds.height + paddingValue;
Bounds is fairly accurate, but not perfect.

D3 dynamically vertically align text

I've seen a few post here about using dy to vertically align text, but all of them just pick a random value without explaining it. Surely this value would differ depending on the font size? My text's font size is stored in a variable (fsize), and its value can change depending on other factors. I tried setting .attr("dy", fsize / 2) (not quite exactly that since fsize is a string and in ems, but you get the point), and my text is way off centre. What value should I choose, given a font size of fsize?
"Surely this value would differ depending on the font size?"
if you use 'em' units it shouldn't matter what the font size is as they're a relative-size unit
https://www.w3.org/WAI/GL/css2em.htm
So you can use rules of thumb like .attr("dy", "0.7em") which shifts text y-wards by 70% of the font height

How to get the real height of a text?

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.

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.

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