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
Related
https://github.com/fabricjs/fabric.js/blob/master/src/shapes/text.class.js#L210
_fontSizeFraction: 0.222,
_fontSizeMult: 1.13,
Is there any clue how they come from ?
I found they are very useful to measure the actual text size.
_fontSizeFraction is approximately equal to 2/9, but my impression is that this value would be used to decrease the default size of the font.
Text Line proportion to font Size (in pixels)
_fontSizeMult increases values by 13%. It takes the font height, increases it by 13% to give you the total line height including line-spacing.
These variables look like defaults and were likely chosen by the developer based on personal preference.
They work for finding the text size because the text size is likely defined by these variables.
check this "issue" on fabricjs github where the fabric dev explain this
https://github.com/fabricjs/fabric.js/issues/2059#issuecomment-85897275
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");
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.
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.
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?