Replacing Text with SVG paths in JavaScript.
tl;dr? just scroll all the way down for the mono space font, and 2 versions of the code to print it on the screen.
- SVG Paths of a Mono Space Font in a hash.
- Basic Function to Append SVG text on screen.
- Function to Append SVG with text wrapping.
SVG vs Plain Text in Browser
Different browsers and devices have their own rendering engines, which result in sometimes the words having minor differences despite being the same font. A solution to that issue is to use SVG (Scalable Vector Graphics) instead.
SVG is nothing more than a simple plain text file that describes lines, curves, shapes, and color. Therefore on any browser, when we put SVG on the screen, it is equivalent to putting an image, so that it’ll always look the same no matter what the browser or device you are using.
However with SVG, there is a downfall that you cannot highlight it, therefore people cannot copy the text. Though depending on your purpose, you might want this as a feature instead.
Creating the SVG paths for each letter is simple, there are many ways to do so, I used Adobe Illustrator to covert each letter and symbol to a SVG. Here are some examples of what the SVG paths I used looks like.
Appending Text to the Screen
Before we start, I’ll like to mention that I am using the D3 JavaScript Library. So if anyone plans on using my code, please take a look at that library and import the library in your own project.
I am also using a mono space font, which is a type of font that the letters/characters each occupy the same amount of horizontal space.
Let’s take a look at the parameters of the function first.
In the parameters we have g, which is the html element we are appending the image to. The text, being the words or paragraph we are displaying on the screen. The id, is the name of this html element’s id we are creating. X and Y being the start position of the text. Fill color is the color of the text, and scale is the size of the text.
There are two optional parameters, first is the horizontal_letter_spacing, this is how width each of my letters are. It is used to figure out how far away each letter should be from each other. The other one being stroke_width, which is the number that tells how wide the line is in units, which I default to 2.
The rest is simple, we simply select the g and for each letter or character in the string, we append a path to it, giving it the necessary attributes while updating the new X position by the horizontal spacing, and the scale (size) of each letter.
Note: character_array is a hash of all the possible characters on the keyboard as an SVG path of an mono space font . Scroll all the way down to get the hash.
However there is one issue, this will continue forever even going off the screen, since this doesn’t know when to stop, and restart in the next line.
Append Text With Wrapping
Therefore, we need some additional variables to keep track of when we want the text to stop, and start one line below. Let’s take a look at the new parameters.
Everything is pretty much the same except with two additional parameters, x2 and vertical_spacing. X2 is used to determine the where to stop the text and warp everything else to the next line. vertial_spacing is the height of each characters/letters so we know where to start the next line.
Now with text wrap, we want to first find how many space we have to work with, and how many characters can fit in that space.
We then want to create a while loop, that will keep going until we finished putting every word on the screen. We also want to find where the last space character is located since words are divided up using space.
Once we determine all this, we can start appending the SVG path of the word to the screen with all it’s attributes.
Now we just need to reset the X location and find the new Y location and restart the process until everything in the string is printed.
Just here for the code?
Keep in mind that I am using d3.js in my functions.
