shrhdk / text-to-svg Goto Github PK

font shadow

For a project I am working on, I just need to produce and then load the SVG path produced by the input of the user, as the one given at the documentation (p.x : <svg xmlns = ...d="M5.27-54..."/> ). Though, I clearly understood how the getSVG( ) method works, I can't return its value properly. Is there any easy way to do that? Thanks in advance :)

I am trying to do something similar with OpenType alone and have had Zero luck.
We are on a windows IIS setup, without node.

Can this work int he browser alone?
Will it weld overlapping paths?

Here is the code I used to rotated my text

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const ruby_attributes = {fill: 'red', stroke: 'red', transform: 'matrix(0,1,-1,0,0,0)'};
const ruby_options = {x: 0, y: 0, fontSize: 32, anchor: 'top', attributes: ruby_attributes};
const ruby = textToSVG.getSVG('hanzi', ruby_options)

console.error(ruby);

Generate

node index.js 2> ruby.sv

Result

As you can see the text is out of the canvas (white frame).

Question

How do I resize the canvas and position the text inside?

I would like to use this plugin in my Vuejs project, but I have problems with setting it right.
When in my component I use basic example:

const TextToSVG = require('text-to-svg'); const textToSVG = TextToSVG.loadSync(); const svg = textToSVG.getSVG('hello'); console.log(svg);

I got TypeError: fs.readFileSync is not a function error.

Running the first example from the readme fails

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const attributes = {fill: 'red', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};

const svg = textToSVG.getSVG('hello', options);

console.log(svg);

with the following error

/test/node_modules/text-to-svg/build/src/index.js:146
        return key + '="' + attributes[key] + '"';

TypeError: Cannot read property 'fill' of undefined

I think there is a bug in this line: https://github.com/shrhdk/text-to-svg/blob/3.0.0/src/index.js#L134

You probably want to read from options.attributes instead of attributes there.

Great Project, keep it up!

Hi,
I am looking for the SVG path to be a single lined path like below:

Currently,
It generates a double lined path like this :

Is it possible to generate a single lined path like that in the first image that I have attached ?

Hello, I love this tool and for the most part it works well. I would like to know if it's possible to implement multi-line support? Not sure where to start. I was thinking simply create new input fields after hitting enter, then text-to-svg can loop through the inputs and create multiple paths. Or somehow recognize the the new line in a textarea field and offset those characters to be in a new row in the result path(single path).

related: #22

Data

This is the glyph I tried to convert to svg:

[
  { "codepoint": "U+3405", "ruby": "wǔ", "glyph": "㐅" },
  { "codepoint": "U+3406", "ruby": "yǐn", "glyph": "㐆" }
]

Problem

I got the following error even when first and second element are the same.

$ node --max_old_space_size=8192 --optimize_for_size --max_executable_size=4096 --stack_size=4096 --require babel-core/register ./index.js 
----
㐅 /wǔ/
<path fill="black" stroke="black" id="glyph" d="M47.20 67.60L104.80 67.60L104.80-4.40L47.20-4.40ZM76 28.65L53.10-0.80L98.90-0.80ZM78.30 31.60L101.20 2.15L101.20 61.05ZM53.10 64.00L76 34.55L98.90 64.00ZM50.80 2.15L73.70 31.60L50.80 61.05Z"/>
<path fill="black" stroke="black" id="annotation" d="M41.51 17.56L43.22 17.56L44.44 12.90C44.66 12.07 44.84 11.26 45.03 10.38L45.11 10.38C45.32 11.26 45.48 12.06 45.70 12.87L46.97 17.56L48.73 17.56L51.06 8.87L49.69 8.87L48.41 13.90C48.22 14.73 48.06 15.51 47.86 16.33L47.80 16.33C47.59 15.51 47.40 14.73 47.19 13.90L45.83 8.87L44.41 8.87L43.06 13.90C42.84 14.71 42.66 15.51 42.47 16.33L42.39 16.33C42.23 15.51 42.06 14.73 41.88 13.90L40.58 8.87L39.10 8.87ZL41.34 23.72M41.48 13.24L42.94 13.24"/>
----
㐅 /wǔ/
<path fill="black" stroke="black" id="glyph" d="M47.20 67.60L104.80 67.60L104.80-4.40L47.20-4.40ZM76 28.65L53.10-0.80L98.90-0.80ZM78.30 31.60L101.20 2.15L101.20 61.05ZM53.10 64.00L76 34.55L98.90 64.00ZM50.80 2.15L73.70 31.60L50.80 61.05Z"/>
<path fill="black" stroke="black" id="annotation" d="M41.51 17.56L43.22 17.56L44.44 12.90C44.66 12.07 44.84 11.26 45.03 10.38L45.11 10.38C45.32 11.26 45.48 12.06 45.70 12.87L46.97 17.56L48.73 17.56L51.06 8.87L49.69 8.87L48.41 13.90C48.22 14.73 48.06 15.51 47.86 16.33L47.80 16.33C47.59 15.51 47.40 14.73 47.19 13.90L45.83 8.87L44.41 8.87L43.06 13.90C42.84 14.71 42.66 15.51 42.47 16.33L42.39 16.33C42.23 15.51 42.06 14.73 41.88 13.90L40.58 8.87L39.10 8.87ZL41.34 23.72M41.48 13.24L42.94 13.24"/>
Error: Text data outside of root node.
Line: 7
Column: 7
Char: ;
    at error (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:667:10)
    at strictFail (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:693:7)
    at Object.write (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:1048:15)
    at SAXStream.write (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:239:18)
    at Readable.ondata (_stream_readable.js:555:20)
    at emitOne (events.js:96:13)
    at Readable.emit (events.js:188:7)
    at Readable.read (_stream_readable.js:381:10)
    at flow (_stream_readable.js:761:34)
    at resume_ (_stream_readable.js:743:3)
Done in 2.22s.

Even if I try with latin alphabet and number I got the issue:

[
  { "codepoint": "U+3405", "ruby": "123", "glyph": "a" },
  { "codepoint": "U+3406", "ruby": "456", "glyph": "b" }
]

Question

Do you have an idea?

How can we remove padding around text? The <path> doesn't start at position 0,0, it is padded based off font, so if we specify fontSize: 20, for Arial and Verdana there will be two different heights to the SVG's.

Hi,
thanks for the great job on this module,
but it seems like its not getting RTL languages correctly since it does turn the letters into svg but it seperates the letters. RTL languages like persian are concatenated.

while it should be: کلاه

the letters are also spitted out backwards.
I'll appreciate it if you support this.
thanks in advance
Ahmad,

Current:

var TextToSVG = require('text-to-svg').TextToSVG;

Ideal:

import TextToSVG from 'text-to-svg';

Just posting this issue in case others have the same problem. No matter what the SVG is always outside and on top of canvas, not matter how I use anchor or don't use. I've followed other suggestions in the issues list but nothing resolves the problem. I'm using a TTF if that matters.

Like this :

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const attributes = {fill: '#FF6633', stroke: '#FF6633'};
const options = {x: 0, y: 0, fontSize: 44, anchor: 'top', attributes: attributes};

const svg = textToSVG.getSVG('产品经理',options);
console.log(svg);

Right now, the getMetrics method returns the proportions of the path, but it calculates the height of the text including the special characters even if those characters are not used.

Sometimes this could cause problems when centring the text vertically, so we would like to extend the getMetrics method to also give back the exact height of the given text.

As a result the response of the method could look like this for the given example:

{
    "x":0,
    "y":0,
    "baseline":28.632,
    "width":71.952,
    "height":35.568,
    "ascender":28.632,
    "descender":-6.936,
    "exactHeight": 24
}

What do you think about it? Shall we prepare a pull request?

Hi, Can you provide a list of supported attributes. I've tried some but did not work.

I used the code from the documentation and get the following error:

Uncaught TypeError: fs.readFileSync is not a function

This was from a browserify setup. Using webpack, I get a similar error:

Module not found: Error: Cannot resolve module 'fs'

Hello, thanks for your work.
I'm just trying to use it but I don't know how to start :(
Sorry I have not so much experience with require libraries etc. but usually I use Gulp.
I tried to include index.js in a html file and checking to console log I got errors.

Please can you help me?

Thanks

We should note that the fontSize is points and not pixels.

I have a call
TextToSVG.load(fontPath, function(err, textToSVG) {}

The err function is randomly triggered. For example, I use the same font and it could work X times and then trigger the error the X + 1 time and work again if called the X + 2 time.

Any idea what could be wrong? Is there a gotcha somewhere or some specific but minor thing that must be done?

I recently wanted to use this in an angular 7 project and I got

ERROR in ./node_modules/text-to-svg/build/src/index.js
Module not found: Error: Can't resolve 'path' in '/mnt/d/Users/E513185/OneDrive/signaletikeditor/signaletikeditor-frontend/node_modules/text-to-svg/build/src'

Hey - it was only because I starred this package that was I able to find it again. You need to add more relevant keywords in your package.json file. Thanks!

I need text to be applied to much bigger image. How I can set width and height?

From the description it seems text-to-svg does not support render text in vertical direction, which is common in Chinese and Japanese. In SVG text, there is also a writing-mode option to support such functionality.

related: #23

Env

• text-to-svg: ^3.1.0,
• font: https://github.com/googlei18n/noto-cjk/blob/master/NotoSansTC-Regular.otf

Code

import TextToSVG from "text-to-svg";

const textToSVG = TextToSVG.loadSync(
  "./resources/fonts/NotoSansTC-Regular.otf"
);
const svg = textToSVG.getSVG("yǐn");
console.log(svg);

Output:

$ node --require babel-core/register ./debug.js 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101.30400000000002" height="106.56000000000002"><path d="M0-7.13L4.61-7.13L4.61-13.68C8.57 3.67 4.82NaNNaNNaNLNaNNaNLNaNNaNLNaNNaN"/></svg>

Error

Above is a short snippet that reproduce the but, in the context of my app I got more info:

yǐn <path fill="black" stroke="black" id="annotation" d="M39.24 15.98L40.26 15.98L40.26 14.52C41.14 18.38 40.31NaNNaNNaNLNaNNaNLNaNNaNLNaNNaN"/>
already exists
Error: Got an error parsing the glyph "㐆": Unexpected character "N" at index 54..
    at SAXStream.<anonymous> (/data/projects/hanzi-pinyin-font/node_modules/svgicons2svgfont/src/index.js:245:29)
    at emitOne (events.js:96:13)
    at SAXStream.emit (events.js:188:7)
    at Object.me._parser.(anonymous function) [as onopentag] (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:258:17)
    at emit (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:640:35)
    at emitNode (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:645:5)
    at openTag (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:841:5)
    at Object.write (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:1305:13)
    at SAXStream.write (/data/projects/hanzi-pinyin-font/node_modules/sax/lib/sax.js:239:18)
    at Readable.ondata (_stream_readable.js:555:20)
(node:4788) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'svg' of undefined
Done in 2.25s.

Currently all letters are combined to one path.

Is it possible to have an option to create one path per letter?
Then it would be possible to animate the text letter by letter.

Is it possible to outline the text created with this module? For example, I would like to write text in white and outlined in black. This feature is possible with the vectorize-text module.

Hello,

How can I manage to toggle options in order to get a horizontal alignment: justify ? I guess there would be something to do with letterSpacing ?

Hi i want to create some text with Raleway Font (fonts.googleapis.com/css?family=Raleway)

Any idea how to achieve this?

Thanks

I want to get single line svg path,but it offers only double lines.the same problem mentioned in https://github.com/shrhdk/text-to-svg/issues/34。
I have tested several options，but no one works, Thanks for your excellent work, I would be very grateful for any suggestions。

I can't run v3.1.4 , Can't resolve './build/src/index.js'.
I found your index.jsfile

/**
 * Copyright (c) 2016 Hideki Shiro
 */

module.exports = require('./build/src/index.js');

And I can't found the folder named buildin 3.1.4.
Maybe you should change it to

module.exports = require('./src/index.js');

Hi everyone.

I've experienced an error when trying to use this library in Internet Explorer in an app created with create-react-app.

Apart from having to use serve to see the app working in IE (as npm start seems to be broken right now), when I try to run load, I get an Access denied error.

I can't say where the source of the error is because, when I follow the error line and column in the console, the script is minified.

More information in the test project I created.

Thanks in advance.

I've been experimenting with the extension and it works pretty well in almost every explorer, but when I tried to export an svg from Firefox it doesn't allow me to even click the button I created for that, do you have any ideas why this is happening?, any help would be more than appreciated, I know is not an issue (at all), but I really need help.

Have a nice day,
rrrr

How to set font-weight?

Would be useful to pass id to svg element, to use it with Snap.svg

Hello.

How can I rotate text for 30 degrees?

Thanks

The file /test/browser.html is not working.

The url for browser.js referenced in the browser sample is wrong.
Tried browser.js is but it throws error on line 7
import TextToSVG from '../src';

Hi, I tried running the example:

var TextToSVG = require('text-to-svg').TextToSVG;
var textToSVG = new TextToSVG();

var attributes = {fill: 'red', stroke: 'black'};
var options = {x: 0, y: 0, fontSize: 72, attributes: attributes};

var svg = textToSVG.getSVG('hello', options);

console.log(svg);

I saved the output to a file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="red" stroke="black" d="M 5.2734375 -54.0703125 L 10.6171875 -54.0703125 L 10.6171875 -33.99609375 Q 15.85546875 -39.234375 21.0234375 -39.234375 Q 26.89453125 -39.234375 29.6015625 -34.06640625 Q 31.11328125 -31.1484375 31.11328125 -27 L 31.11328125 -3.65625 L 25.76953125 -3.65625 L 25.76953125 -25.41796875 Q 25.76953125 -34.13671875 20.1796875 -34.13671875 Q 16.41796875 -34.13671875 13.5703125 -31.39453125 Q 10.6171875 -28.44140625 10.6171875 -24.64453125 L 10.6171875 -3.65625 L 5.2734375 -3.65625 L 5.2734375 -54.0703125 Z M 67.67578125 -14.2734375 Q 64.546875 -2.25 54.0703125 -2.25 Q 47.56640625 -2.25 43.76953125 -7.6640625 Q 40.32421875 -12.62109375 40.32421875 -20.7421875 Q 40.32421875 -28.51171875 43.55859375 -33.46875 Q 47.35546875 -39.234375 54 -39.234375 Q 66.97265625 -39.234375 67.81640625 -19.65234375 L 45.73828125 -19.65234375 Q 46.16015625 -7.06640625 54.140625 -7.06640625 Q 60.46875 -7.06640625 62.05078125 -14.2734375 L 67.67578125 -14.2734375 M 62.05078125 -24.2578125 Q 60.890625 -34.41796875 54 -34.41796875 Q 47.35546875 -34.41796875 45.94921875 -24.2578125 L 62.05078125 -24.2578125 Z M 92.8125 -11.53125 Q 92.8125 -8.4375 95.765625 -8.4375 Q 98.19140625 -8.4375 101.07421875 -9 L 101.07421875 -3.62109375 Q 96.8203125 -3.0234375 94.81640625 -3.0234375 Q 87.1875 -3.0234375 87.1875 -10.51171875 L 87.1875 -54.0703125 L 92.8125 -54.0703125 L 92.8125 -11.53125 Z M 128.8125 -11.53125 Q 128.8125 -8.4375 131.765625 -8.4375 Q 134.19140625 -8.4375 137.07421875 -9 L 137.07421875 -3.62109375 Q 132.8203125 -3.0234375 130.81640625 -3.0234375 Q 123.1875 -3.0234375 123.1875 -10.51171875 L 123.1875 -54.0703125 L 128.8125 -54.0703125 L 128.8125 -11.53125 Z M 162.0703125 -39.234375 Q 168.6796875 -39.234375 172.44140625 -33.3984375 Q 175.67578125 -28.546875 175.67578125 -20.7421875 Q 175.67578125 -14.87109375 173.7421875 -10.44140625 Q 170.15625 -2.21484375 161.9296875 -2.21484375 Q 155.56640625 -2.21484375 151.76953125 -7.62890625 Q 148.32421875 -12.5859375 148.32421875 -20.7421875 Q 148.32421875 -29.53125 152.296875 -34.55859375 Q 156.09375 -39.234375 162.0703125 -39.234375 M 161.9296875 -34.20703125 Q 158.0625 -34.20703125 155.8828125 -30.1640625 Q 153.94921875 -26.61328125 153.94921875 -20.7421875 Q 153.94921875 -15.328125 155.53125 -11.91796875 Q 157.7109375 -7.2421875 162 -7.2421875 Q 165.9375 -7.2421875 168.1171875 -11.28515625 Q 170.05078125 -14.8359375 170.05078125 -20.671875 Q 170.05078125 -26.75390625 168.046875 -30.234375 Q 165.90234375 -34.20703125 161.9296875 -34.20703125 Z"/></svg>

But it doesn't seem to work, it's just white when I open it in Chrome/Safari or trying to preview it in Finder. Am I misunderstanding how it should work?

转换中文时不对,utf-8?
svg = textToSVG.getSVG("鸔 鸕 鸖 鸗 鸘 鸙",{
// x:0,y:0,
fontSize:72,
// kerning:true,
// letterSpacing:0,
anchor:'center'
});

Does anyone have any good ideas on how to remove path overlaps?
Or recommend a different file format?

From what I gathered ttf files describe character boundaries not paths.

Single line ttfs (often used for laser cutting / cnc programs) overlap their outside, and inside boundaries.

in example using the the cam bam fonts
http://www.mrrace.com/CamBam_Fonts/

textToSVG.getD("1", {x: 0, y: 0, fontSize: 10, anchor: "center bottom"})
"M0.25-2L0.25-9.20L-0.78-9.20L0.25-9.20L0.25-2Z"

move 0.25 -2 <- Starting position
line  0.25-2      to 0.25-9.20
line 0.25-9.20  to -0.78-9.20
Reflection point, everything else is the previous in reverse
line -0.78-9.20 to 0.25-9.20
line 0.25-9.20 to 0.25-2

Do otf file formats specify paths rather than character boundaries ?

Otherwise the SVG is rendered outside of the viewbox. Try a simple test and open the resulting SVG in Safari/Chrome.

Current version with left baseline:

With left top:

This package is great, check out what I made with it here https://github.com/crocodilejs/custom-fonts-in-emails.

I don't see anything in the documentation about loading a font via data-url, so my guess is that this isn't supported, but I would like to confirm that.

If that is true, is there a suggestion for how I could convert text to a path when I only have the data-url of a font?

If data-urls can be used, could the Readme include an example for how to use it?

Given the following:

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();
const attributes = {fill: 'black', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 12, anchor: 'top', attributes: attributes};
const svg = textToSVG.getSVG('You there?', options);
console.log(svg);

the resulting SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="12">
    <path fill="black" stroke="black" d="M2.51 6.66L0.36 1.55L1.44 1.55L3.01 5.55L4.56 1.55L5.64 1.55L3.50 6.66L3.50 9.95L2.51 9.95L2.51 6.66ZM9.01 4.02L9.01 4.02L9.01 4.02Q10.11 4.02 10.74 4.99L10.74 4.99L10.74 4.99Q11.28 5.80 11.28 7.10L11.28 7.10L11.28 7.10Q11.28 8.08 10.96 8.82L10.96 8.82L10.96 8.82Q10.36 10.19 8.99 10.19L8.99 10.19L8.99 10.19Q7.93 10.19 7.29 9.29L7.29 9.29L7.29 9.29Q6.72 8.46 6.72 7.10L6.72 7.10L6.72 7.10Q6.72 5.64 7.38 4.80L7.38 4.80L7.38 4.80Q8.02 4.02 9.01 4.02ZM8.99 4.86L8.99 4.86L8.99 4.86Q8.34 4.86 7.98 5.53L7.98 5.53L7.98 5.53Q7.66 6.12 7.66 7.10L7.66 7.10L7.66 7.10Q7.66 8.00 7.92 8.57L7.92 8.57L7.92 8.57Q8.29 9.35 9 9.35L9 9.35L9 9.35Q9.66 9.35 10.02 8.68L10.02 8.68L10.02 8.68Q10.34 8.09 10.34 7.11L10.34 7.11L10.34 7.11Q10.34 6.10 10.01 5.52L10.01 5.52L10.01 5.52Q9.65 4.86 8.99 4.86ZM12.88 8.21L12.88 4.25L13.77 4.25L13.77 8.12L13.77 8.12Q13.77 9.35 14.75 9.35L14.75 9.35L14.75 9.35Q15.38 9.35 15.86 8.88L15.86 8.88L15.86 8.88Q16.29 8.47 16.29 7.79L16.29 7.79L16.29 4.25L17.19 4.25L17.19 9.95L16.52 9.95L16.37 9.28L16.37 9.28Q15.58 10.19 14.55 10.19L14.55 10.19L14.55 10.19Q13.65 10.19 13.20 9.50L13.20 9.50L13.20 9.50Q12.88 9 12.88 8.21L12.88 8.21ZM26.33 4.25L26.33 2.70L27.25 2.70L27.25 4.25L28.66 4.25L28.66 5.11L27.25 5.11L27.25 8.74L27.25 8.74Q27.25 9.15 27.70 9.15L27.70 9.15L27.70 9.15Q28.26 9.15 28.74 9.06L28.74 9.06L28.74 9.96L28.74 9.96Q28.03 10.05 27.52 10.05L27.52 10.05L27.52 10.05Q26.33 10.05 26.33 8.87L26.33 8.87L26.33 5.11L25.20 5.11L25.20 4.25L26.33 4.25ZM30.88 9.95L30.88 1.55L31.77 1.55L31.77 4.89L31.77 4.89Q32.64 4.02 33.50 4.02L33.50 4.02L33.50 4.02Q34.48 4.02 34.93 4.88L34.93 4.88L34.93 4.88Q35.19 5.37 35.19 6.06L35.19 6.06L35.19 9.95L34.29 9.95L34.29 6.32L34.29 6.32Q34.29 4.87 33.36 4.87L33.36 4.87L33.36 4.87Q32.74 4.87 32.26 5.33L32.26 5.33L32.26 5.33Q31.77 5.82 31.77 6.45L31.77 6.45L31.77 9.95L30.88 9.95ZM40.34 8.18L41.28 8.18L41.28 8.18Q40.76 10.18 39.01 10.18L39.01 10.18L39.01 10.18Q37.93 10.18 37.29 9.28L37.29 9.28L37.29 9.28Q36.72 8.46 36.72 7.10L36.72 7.10L36.72 7.10Q36.72 5.81 37.26 4.98L37.26 4.98L37.26 4.98Q37.89 4.02 39 4.02L39 4.02L39 4.02Q41.16 4.02 41.30 7.28L41.30 7.28L37.62 7.28L37.62 7.28Q37.69 9.38 39.02 9.38L39.02 9.38L39.02 9.38Q40.08 9.38 40.34 8.18L40.34 8.18ZM37.66 6.52L40.34 6.52L40.34 6.52Q40.15 4.82 39 4.82L39 4.82L39 4.82Q37.89 4.82 37.66 6.52L37.66 6.52ZM43.75 4.25L44.67 4.25L44.67 5.45L44.67 5.45Q45.70 4.35 46.89 4.02L46.89 4.02L46.89 5.06L46.89 5.06Q45.53 5.39 44.67 6.54L44.67 6.54L44.67 9.95L43.75 9.95L43.75 4.25ZM52.34 8.18L53.28 8.18L53.28 8.18Q52.76 10.18 51.01 10.18L51.01 10.18L51.01 10.18Q49.93 10.18 49.29 9.28L49.29 9.28L49.29 9.28Q48.72 8.46 48.72 7.10L48.72 7.10L48.72 7.10Q48.72 5.81 49.26 4.98L49.26 4.98L49.26 4.98Q49.89 4.02 51 4.02L51 4.02L51 4.02Q53.16 4.02 53.30 7.28L53.30 7.28L49.62 7.28L49.62 7.28Q49.69 9.38 51.02 9.38L51.02 9.38L51.02 9.38Q52.08 9.38 52.34 8.18L52.34 8.18ZM49.66 6.52L52.34 6.52L52.34 6.52Q52.15 4.82 51 4.82L51 4.82L51 4.82Q49.89 4.82 49.66 6.52L49.66 6.52ZM55.54 4.04L54.57 4.04L54.57 3.87L54.57 3.87Q54.57 2.60 55.22 1.79L55.22 1.79L55.22 1.79Q55.88 0.95 57.09 0.95L57.09 0.95L57.09 0.95Q58.12 0.95 58.77 1.55L58.77 1.55L58.77 1.55Q59.43 2.17 59.43 3.13L59.43 3.13L59.43 3.13Q59.43 4.26 58.25 5.44L58.25 5.44L58.25 5.44Q57.75 5.94 57.59 6.38L57.59 6.38L57.59 6.38Q57.40 6.86 57.40 7.96L57.40 7.96L57.40 7.96Q57.40 8.16 57.40 8.26L57.40 8.26L56.40 8.26L56.40 8.26Q56.41 6.80 56.66 6.18L56.66 6.18L56.66 6.18Q56.87 5.64 57.49 4.98L57.49 4.98L57.49 4.98Q58.41 3.98 58.41 3.16L58.41 3.16L58.41 3.16Q58.41 2.70 58.17 2.34L58.17 2.34L58.17 2.34Q57.81 1.83 57.08 1.83L57.08 1.83L57.08 1.83Q55.54 1.83 55.54 3.95L55.54 3.95L55.54 3.95Q55.54 4.01 55.54 4.04L55.54 4.04ZM56.24 10.74L56.24 9.35L57.59 9.35L57.59 10.74L56.24 10.74Z"/>
</svg>

has the left corner cut off? Is this a known issue or am i missing an attribute that can help with this issue?

Hi,
I'm looking into your project to generate chinese font with pronunciation. One of my goal is to write ruby text, i.e. a character and next to it its pronuncuation (as show below):

As you can see text can be either vertical or horizontal.

How can I append text to achieve this using text-to-svg?

Is it possible to set the spacing like in this example?

Emoji render as two [X] boxes each. I didn't try all of them, just 😎 and 💩.

Might be something to do with charCodeAt vs codePointAt? Or something along those lines? Just guessing.