Rich text - the justification calculation
If you are laying out text then you will need to justify it. But what's the algorithm? Lets take a look...
A tech blog giving usable explainers, advice, tools, tricks and techniques for the Konva JavaScript canvas library, the HTML5 canvas, and related subjects.
If you are laying out text then you will need to justify it. But what's the algorithm? Lets take a look...
The font loading process is a stumbling block for folks new to using web-fonts in conjunction with Konva.Text and in the canvas. In this short post I'll explain what the problem is, how to solve it, and provide links to sample code. Read on...
I'm developing an app that will generate / layout rich text in a canvas. So far my focus has been on the browser but now I need to do some automated testing for which I use node. But node doesn't provide text support out-of-the-box so we have to use node-canvas. How to work with text in node-canvas?
Giving text a block color background with margin and padding is catered for well in CSS but not so easy in Konva where there is nothing as capable as CSS built-in. Here's some code to give you that feature.
I'm generally interested in text layout for couple of side projects so I'm keen to see what Konva can do for me with its Text object. A little research shows the HTML canvas is a little light on text support, but Konva has your back...within limits...
Take your protein pills and put your helmet on, strap yourselves in and hold on tight - we're embarking on a rollercoaster ride to try and find a reliable, robust & repeatable approach to measuring line height on the HTML5 canvas.
A quick run through of some of the principles of working with text and breaking away from relying on textOut and Text object from the Konva HTML5 canvas library.
Long story short, Konvas path measuring for Path.getLength() and Path.getPointAtLength() methods are broken. The math involved is very complex and its not surprising that there are bugs. But also there's a simple and higher performance workaround so on balance its not so bad Lets take a look....