I have tspan element with some text in it. I specified some font-size for it as well. In addition I have parent's box size, i.e. width and height. So now I'd like my text to fit the box with the specified width and height.
One of the options I have is manually calculate string width and height (but it became more complicated in case of different fonts and browsers).
So is there any other way in SVG to resize tspan to necessary sizes? Please note that I want text font size to be changed properly, i.e. so text will be displayed in max font size and any single char from it will be visible.
Well, I've came up with the following solution - have absolutely positioned div element outside of visible area. Apply all fonts and other-related styles (except font size) from tspan to that div, put text into the div. Next try different sizes (you can use binary search for better performance) and measure div size. Once max font size found - apply it along with the text to tspan.
Related
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
I created a custom venn chart for two sets an their intersection in JavaFX.
Now I want to show the number of elements in this sets like in the following picture:
The sets are ellipses and I used masks to give the intersection a different color.
Now I want to show the number with size and position related to the available space so that the numbers are always inside the according area.
The width for the text element is easy to calculate, but I don't know how to get available height for the text elements.
Maybe it could be helpful to have the pixels of the ellipses as path, but I have no idea to how I can get this.
Does anyone know how to implement that?
Edit:
I developed an algorithm to find the size of a rectangle, which fits in the required areas of the ellipses. The text are scaled to the size of the rectangle and it works, but now I have another problem.
I need to center the scaled text in the rectangle an I used a StackPane for that. But I can't position the StackPane in the chart parent. If I set the layoutX and layoutY the bounds in parent are different.
For example: stackPane with text = sp;
sp.setLayoutY(122.1662320906945);
The Result for getBoundsInParent().getMinY() is 97.16622924804688;
How can I set the StackPane position, if I use it in a chart class as chart children?
I have two boxes filled with colors, a green one on the left, and gray one on the right. They go right up against each other in the middle of the screen, and I would like each one to extend the width of the browser, so the green one extends all the way to the left, and the gray one extends all the way to the right, no matter how wide the browser gets. How can I do this?
the width property supports percentage values, which are relative to the size of the window it exists in.
See:
http://learnlayout.com/percent.html
http://www.w3schools.com/cssref/pr_dim_width.asp
I want to calculate actual height of the text, but the AI is giving the text height using the bounding box dimensions.
Please help me to calculate actual height of text!!
Thanks
This is not possible with SVG. You might have to use a (hidden) <canvas> element, draw the text there and check what pixels were colored. Have e.g. a look at the simple contextBoundingBox() function by Phrogz.
I have a multi-line title side by side to an icon. I would like to keep the line-height of that title at about 1.6 . If I do so though, the text does not align on top because it stays vertically centered to the line. The result is that the top of the icon is not aligned with the top of the text. If I use line-height 1 the problem does not occur because the middle vertical alignment of a text in a line of the same size is the same as the top alignment.
You can see what I mean in this code pen.
Any idea?
You can add a negative top margin to your title.
Defining both your font size and the margin in em will allow you to achieve alignment regardless of what font size is inherited.