I am using d3 to create an axis label inside an svg element. Part of the label is constant (string literal) and part of it varies as the user clicks around. To emphasize that it changes, I want it to be bold, while the rest of the text is normal weight. Aligning these two text elements, to each other and the rest of the drawing, has turned out to be quite difficult.
Also, it seems trailing spaces in text elements are ignored, making it harder to do the concatenation. And if there's a way to change styles within a text element, that would work too.
Here is a very hacky way of doing it, in that it won't work with three pieces of text (because text-anchor), and the result is hard to center (do I really need to go use getBBox()?).
function renderLabel(dynamicText){
svg.select(".label").remove();
var label = svg.append("g")
.attr("class", "label")
label.append("text")
.attr("text-anchor", "end")
.text("The Axis is Based On ");
label.append("text")
.attr("text-anchor", "start")
.style("font-weight", "bold")
.attr("transform", "translate(6,0)") //space
.text(dynamicText);
}
In general, I would like to be able to append/concatenate any number of string variables, each with distinct styles, in a way that "looks good" as a sentence, and can be centered. Please tell me there's a better way to do it.
Instead of using separate text elements, use one text element with two tspan elements nested inside. If you do not set separate positioning attributes on the tspan, they will naturally line up as one row of text.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
Related
When I add letter-spacing style to my text on path in D3, it tilts the letters and they don't follow nicely the circle anymore (see highlighted letters on image 2)
You can see my D3 code in this notebook
I've tried to do it in InkScape and it looks like it handles the letter-spacing differently (see image 3)
The style in the inkscape for the text is
font-size:17.6389px;line-height:1.25;text-align:center;text-decoration-color:#000000;letter-spacing:5.29167px;writing-mode:vertical-lr;text-anchor:middle;white-space:pre;fill:#990000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;stop-color:#000000
and for textPath is
font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Arial;-inkscape-font-specification:Arial
I've tried to use some of these attributes, but I cannot get the same result in D3. I would like the letters to be straight as in InkScape
Thanks for your help.
It might be impossible to center the letter with the letter-spacing attribute to be tilted symetrically.
I ended up creating a function that add non-breakable spaces between every character d.data.split("").join("\xa0".repeat(d.space)) where d.data is the text and d.space is the number of spaces inbetween every letter. This is just good for me now and give the following result.
Is there a way to wrap text around an image in openPDF? or around other text? I'm trying to mesh two texts onto one page (texts which may contain pictures), but one text may be larger or smaller then the other. They could look like one of these two pictures:
I was going to make a column text, and test the length of text 2 against the length of the text of text 1 that remains after the first few lines (see the picture), but I couldn't return the remaining text with columnText.go(true).
Is there an easy way to wrap text around a picture or other variable object (aka text)?
it's pretty tedious working out the dimensions of an image then halving it and adding it on every time I want to check whether something is overlapping.
You likely want to use bbox.
This 'returns the bounding box for all matching items', i.e. the rectangle outline of the picture you want to get the coordinates of.
coords = canvas.bbox(item)
or
coords = canvas.bbox("itemtag")
In the case of multiple items with the same tag, it will use the first item given that tag.
How does one subtract a vector path in Sketch. Shapes are straightforward and text is also doable. The white lines in the attached images need to be cuts through the rectangle. Suggestions?
You need to convert the vector-path to outlines first.
Select the desired element with outlines
Choose inside the menu: Layer > Convert to Outlines (⇧⌘O)
Select the elements you want to combine
Choose (Subtract, Intersect or Difference)
Update: added an inline GIF for better visual reference
I am trying to add a short underline in the paragraph style for my inline headlines. At the moment I am doing it with Paragraph Rules - rule below + offset and right indent (see attached image, the orange line). But this solution only works if the columns are always the same width.
Is there a way to add a object/line, with a defined width, to a paragraph style?
Spontaneously, would say no. However that would be easy to set while adding some contents. You could however use a dedicated character style (underline) taht you would attach with agrep style to a tab character. Then you can control "rule" width with a tab position.
Sure. Here it is…(and now just adding characters so stackoverflow will accept my if not too brief message…)
The fact is that you need to add a new line and type in a tab character. The presence of that tab will draw the "rule".
Other solution is to use both "Above" and "Below" rules.
Playing with below's weight, color (white), offset and left indent would make it independent on column width (ruleAbove has entire column range)
Here is how I would solve it:
Create a Stroke Style with Pattern Length = to the page size of your document (not text frame or column) and Length = to whatever length of your line should be.
Example:
Pattern Length = 8.5in (letter size paper)
Length = 1in (width of line under paragraph)
Use Rule Under in the paragraph style and apply the stroke style you created. Make sure to set Width to "Text".
Apply any color/offset, etc. options.
This will work independently of the text column width and text length.