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.
Related
I have created a paragraph text in after effects using Extendscript
For example i have a text "HI". I need to give color for "H" as red [1,0,0] and "I" as green [0,1,0].
I have checked everywhere ,. where i can find out that i can change the text color in whole rather than individually ! is there anything that can be done?
I need to change color of each and individual characters using script
It looks like it's not possible. The text in a text layer is a TextDocument object, and when you look at the AE scripting guide it says
TextDocument fillColor attribute
textDocument.fillColor
Description
The text layer’s fill color, as an array of [r, g, b] floating-point values. For example, in an 8-bpc project, a red
value of 255 would be 1.0, and in a 32-bpc project, an overbright blue value can be something like 3.2.
NOTE: If the text layer has different fill color settings for each character, this attribute returns the setting for the first character. Also, if you change the value, it resets all characters in the text layer to the specified setting.
Type
Array [r, g, b] of floating-point values; read/write.
The important bit is the Note. The same thing applies for all the text attributes like fontSize, fill, stroke &c., &c..
So for some reason you can't access the style attributes for anything but the first character in a line of text. Are you annoyed? I am. Perhaps log a bug with Adobe—it will be completely futile, but you might feel better.
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.
I've been struggling in find the solution for the following problem.
If I want to change the color of each letter in a sentence in latex, how can I do it? Let's say that I want to write "Merry Christmas" using the colors red and green and alternating between them.
I want to define a command and use a forloop to change the color of each letter, but I don't know:
How can I find the number of letters in a sentence (excluding spaces) to give the upper limit for the forloop?
How can I define a string with the two colors to use in the forloop?
So far my silly "solution" is to do it manually, like:
\documentclass[a4paper,12pt]{article}
\usepackage[utf8x]{inputenc}
\usepackage{xcolor}
\begin{document}
\textcolor{red}{M}\textcolor{green}{e}\textcolor{red}{r}
\textcolor{green}{r}\textcolor{red}{y}\textcolor{green}{C}
\textcolor{red}{h}\textcolor{green}{r}\textcolor{red}{i}
\textcolor{green}{s}\textcolor{red}{t}\textcolor{green}{m}
\textcolor{red}{a}\textcolor{green}{s}\textcolor{red}{!}
\end{document}
From what I saw I can define an environment and use a loop to alternate between the colors, I don't have a sensilble solution, but it would be something like:
\newenvironment{redgreen}{
\forloop{WORDNUMBER}{1}{\VALUE{WORDNUMBER} < \LENGHT{WORDNUMBER}}{
\textcolor{red}{WORDNUMBER}
\textcolor{green}{WORDNUMBER + 1}
WORDNUMBER = WORDNUMBER + 2
}
}
The parts with capital letters I know won't work, I just want to give an example of what I'm willing to do. I want to find a way to get the number of letters in the sentence that I would put inside the redgreen block and somehow use the forloop to change the color of each letter in the sentence alternating between red and green. I'm not sure how the forloop works in latex, so everything in the example above may be trash.
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