Non breaking spaces

Arrrg!

There is the normal space character (0x20), and there is the non breaking space character (0xA0).

I was not expecting to have to do anything with these specially in any way to be honest apart from spotting space characters for paragraph text wrapping logic...

However, I have run in to snags, and ended up having to add it as a special case in my code.

The first snag is simple - some fonts (and only a few) do not have the non-breaking space character encoded. So my new font system wants to know the size of every character to work out layout of text in SVG, and it "falls back" to Google NoTo fonts to find the character if missing.

This logic was originally for Emojis, but actually has the full Google NoTo set now, so does Egyptian hieroglyphics and so on. It works well (once you remove the Color[sic] Emoji font).

Thankfully most of the fonts I am using even have extended Latin, so things like Polish crossed "l" characters just work in the base font. Google's free fonts are pretty good!

The problem is that when the main selected font has no non breaking space I fall back, and I hit the Emoji font quite quickly which does, only it is about twice as wide as you expect!

So my text ends up with non breaking space encoded in the Emoji font, and being wide.

Well, this is not ideal, but why would I encounter non breaking spaces anyway? Well, because when I make the SVG output, extra spaces, and leading spaces, and trailing spaces, are all zapped. So any actual formatting with spaces (especially if using mono-spaced fonts) is totally lost. This is bad enough, but I have worked out the size with the spaces and so the result looks horridly stretch to fit the space it should take with all the spaces in place. This took me ages to find as one string I was testing with had a trailing space which I had not spotted. So now I convert all spaces to non breaking spaces for output to SVG.

This them hit the first snag that the non breaking spaces are not in the font, and so I ended up coding all spaces in Emoji (for some base fonts). Again, not spotted originally as the font I was using had non-breaking spaces encoded, but another font did not and just looks horrid spaced!

I have ended up:- (see P.S.)

• Using only spaces for text wrapping (so non breaking spaces do in fact non-break)
• Converting non breaking spaces to spaces for all width calculation
• Converting all spaces to non-breaking spaces when making final SVG

It seems to finally work...

Fonts are fun!

P.S. xml:space="preserve" is your friend - it preserves spaces as they are.

SVG being a tad special

I am pleased to say the work on fonts and SVG has, well, worked. FreeType just worked, and I was able to have a string of Google Noto fonts as backup for missing characters, so emojis, runes, Polish accents, all just worked. Even my new Farrington 7B font. Yay!

This is an update to A&A card printing.

But one aspect really fooled me.

In SVG you can have a text object, and that can be stand alone with the text as the content and attributes like font-family and font-size.

But you can include within it tspan objects. The advantage is that this allows different attributes for some text in-line.

For example changing to an Emoji font part way through, or some other font, or italic, etc, etc.

So far so good.

Then we come to the textLength attribute on text and tspan. This is meant to tell the application the calculated length of the text. As I now have FreeType working that out, and setting lower when I want to squash text, I have the figure to use. I added to the text element, and, err, nothing (when using tspan within text).

So... let's add to the tspan elements. I did this, and obviously I set the textLength on each tspan as the calculated length of that tspan.

It seems I am wrong. I do need to put the textLength on the tspan elements, but they have to be the total text calculated length not the length of the tspan!!!!

Update: For browsers I need textLength on tspan, but for inkscape (which makes the actual images for the card printing) I need textLength on the text object, so setting both!

Me no understand!

P.S. Everything but Safari struggles with a large value for font-size even when in a scaled SVG, showing things short (but stretched to textLength) and different if rotated! I may have to tinker with that at some point to work around. I am sure the SVG is fine!

P.P.S. I embedded fonts in the SVG for use as above, but even though that works in safari (and other browsers), it does not in inkscape. Shame.

P.P.P.S. This is what it looks like now.



P.P.P.P.S. I now have myself a nice svg/font library to do text objects, squashed, wrapped, justified, aligned, all sorts, based on system fonts using the fontconfig library to find system fonts and the freetype library to extract metrics. Works a treat and already deployed in four different systems we have using SVG (e.g. business cards if names are too long, etc).

On the matter of fonts and copyright

I think I am making some progress on using FreeType to work with fonts (previous blog post). And no, I am not planning to include my new Not Alteran font (blog post).

The plan is to move some things I previous did using postscript to SVG, mainly because of its much improved unicode handling. By being able to determine metrics when creating the SVG I can create an SVG that does line breaks and stretching or whatever correctly for the font.

One of the targets for this work is my existing card design platform. It needs some improvement I know, and I have done quite a few things recently, but moving to SVG would make it much neater - not only to see the designs on screen, but also to make cards using unicode characters properly.

And no, not just for emojis (though they will be included in the logic), but for all of the accented characters. Even just doing cards for a school reunion ran in to issues with the default Postscript font, and I still cannot manage some Polish names! Unicode would solve that properly.

Thankfully there are quite a lot of free web fonts (google do loads), so the system can use those. But there is one font that is annoying me. The Farrington 7B font.

It is defined in ISO 7811-1 which is one of the specifications related to bank cards, and is the font for the main large digits on the card (e.g. credit card number). The ISO standard has an appendix with detail drawings of the character outlines with measurements. They are simple as they are lines and arcs only. I had a copy of ISO 7811-1 ages ago for work, but don't have one now. I could pay for one I guess. Somehow they do manage to kill off dodgy copies just on the Internet (having paid once for a copy I can no longer find, I feel somewhat justified in using a dodgy copy if I could find one).

Also, there are several sites selling the 7B font. And it got me wondering, I may as well make one (assuming I find / buy a copy of the ISO). But then I don't actually have a clue what he copyright issues are here!

Fonts are special from a copyright point of view in that the font itself has copyright, but instances of use of the font are allowed. i.e. the font is like the written recipe and the printed work using it is the cake.

But an ISO is meant to be a set of instructions you can follow. You can make the bank cards following the instructions in the ISO you paid for, and presumably follow them to make an embossing machine to emboss the Farrington 7B characters, and do so without copyright issues.

So can one make a font from the details in the ISO and not be breaking copyright by effectively copying that appendix of the ISO in to a font? I have no idea.

The other issue is the font design tools - I need to work out if I can enter co-ordinates. It seems that they are designed to allow one to draw and drag points, and set guide lines, and so on, not simply enter co-ordinates off an engineering drawing.

The other annoying thing is that I have the spec converted to a Postscript font which I use now. I must have done this at least two decades ago.. From this I should be able to re-work the drawings, but to be honest, that is probably more work than the cost of paying for the ISO again.

Anyway, if I do make a font, I'll publish it for free. It is 10 digits, and that is it.

%% Farrington 7 B characters (credit cards)

/7B 50 dict dup begin

/FontMatrix [1 233.7 div 0 0 1 233.7 div 0 0] def

/FontType 3 def

/FontBBox [20 0 120 170] def

/FontName (Farrington 7 B) def

/PaintType 3 def

/Encoding 256 array def

/CharStrings 11 dict def

0 1 255 { Encoding exch /null put}for

/Private 10 dict dup begin

/m/moveto load def

/l/lineto load def

/x{currentpoint exch pop lineto} bind def

/y{currentpoint pop exch lineto} bind def

/cp/closepath load def

/an /arcn load def

/a /arc load def

CharStrings /null {} put

/c {Encoding 1 index dup (0)0 get add exch ( ) cvs cvn put

    ( ) cvs cvn CharStrings exch 3 -1 roll put} bind def

{-15 80 m 15 50 30 90 0 an 15 -50 30 0 -90 an -15 -50 30 -90 -180 an -15 50 30 180 90 an

 15 70 m -15 50 20 90 180 a -15 -50 20 -180 -90 a 15 -50 20 -90 0 a 15 50 20 0 90 a}0 c

{-5 80 m 5 x -70 y 45 x -80 y -45 x -70 y -5 x 60 y -15 x 70 y}1 c

{-45 74 m -15 0 80 110 90 an 15 50 30 90 0 an 15 25 30 0 -90 an

 -15 -25 20 90 180 a -70 y 45 x -80 y -45 x -15 -25 30 180 90 an

 15 25 20 -90 0 a 15 50 20 0 90 a -15 0 70 90 110 a -41 65 l}2 c

{-45 74 m -15 0 80 110 90 an 15 50 30 90 0 an 15 25 30 0 -60 an 15 -25 30 60 0 an

 15 -50 30 0 -90 an -15 0 80 -90 -110 an -45 -74 l -41 -65 l -15 0 70 -110 -90 a

 15 -50 20 -90 0 a 15 -25 20 0 90 a -25 x 5 y 15 25 20 -90 0 a 15 50 20 0 90 a

 -15 0 70 90 110 a -41 65 l}3 c

{-45 80 m -35 x 5 y 10 x 80 y 20 x 5 y 45 x -5 y 20 x -80 y 10 x -5 y -45 x}4 c

{-45 80 m 45 x 70 y -35 x 5 y 15 -25 30 90 0 an 15 -50 30 0 -90 an

 -15 0 80 -90 -110 an -45 -74 l -41 -65 l -15 0 70 -110 -90 a 15 -50 20 -90 0 a

 15 -25 20 0 90 a -45 x}5 c

{-45 80 m -35 x 0 y -15 -25 30 110 90 an 15 -25 30 90 0 an 15 -50 30 0 -90 an

 -15 -50 30 -90 -180 an -45 80 l 15 -5 m -15 -25 20 90 180 a -15 -50 20 -180 -90 a

 15 -50 20 -90 0 a 15 -25 20 0 90 a}6 c

{-45 80 m 45 x -80 y 35 x 70 y -45 x}7 c

{-20 80 m 20 55 25 90 0 an 20 35 25 0 -30 an 10 0 l 20 -35 25 60 0 an 20 -55 25 0 -90 an

 -20 -55 25 -90 -180 an -20 -35 25 180 120 an -10 0 l -20 35 25 -120 -180 an

 -20 55 25 180 90 an 20 70 m -20 55 15 90 180 a -20 35 15 -180 -120 a 0 6 l

 20 35 15 -60 0 a 20 55 15 0 90 a -20 -70 m 20 -55 15 -90 0 a 20 -35 15 0 60 a

 0 -6 l -20 -35 15 120 180 a -20 -55 15 -180 -90 a}8 c

{45 -80 m 15 50 30 0 90 a -15 50 30 90 180 a -15 25 30 -180 -90 a 15 25 30 -90 -70 a

 35 0 l -80 y cp -15 70 m 15 50 20 90 0 an 15 25 20 0 -90 an -15 25 20 -90 -180 an

 -15 50 20 180 90 an}9 c

end def

/BuildChar

{

 exch begin Private begin

 140 0 FontBBox aload pop setcachedevice 70 85 translate

 1 setlinecap 1 setlinejoin 10 setlinewidth

 newpath Encoding exch get CharStrings exch get exec closepath

 gsave

 %strokepath

 %0 setlinewidth

 stroke

 grestore

 fill

 end end

} bind def

end definefont pop

Update: First attempt at font here.

P.S. I was slightly cursing ISO 7811-1 as (apart from a couple of obvious typos) the dimensions were nasty and did not even add up exactly. E.g. character width 2.54mm but adding the stroke width to the control points gave 2.55mm. I am, of course, being thick, convert the dimensions to tho (1/1000th of an inch) and they come out as nice round numbers. Even the small rounding radius (0.13mm) comes out as 5/1000", and pretty much everything comes out as a multiple of 5/1000". I probably should have converted to tho first as it would have made it a lot easier to work out the co-ordinates. I may re-do some time.

P.P.S. I did redraw, converting to 1/5000th of an inch, which made some nice round numbers.

SVG, font metrics, am I being thick?

I really hope someone tells me I have missed the bleeding obvious for a change.

I think SVG lacks two key features.

1. The ability to set a maximin size on a line of text, i.e. so that if it works out longer it will be squashed in some way. There is a way to set a calculated size and have either the spacing or the spacing and glyphs adjusted to match that, but I cannot find a way to say "squash, but only if it would be too big".

2. The ability to take a block of text, give it a width (and height, why not) and line spacing and have it fill the box, breaking on spaces between words.

If there is svg magic (and I don't mean javascript to run on a web site that will do the business later), just plain svg that will easily convert to png or pdf, and still work, that is what I want.

The alternative, for which I am still massively failing to find a solution, is a simple Debian installed C code library (not C++ please) that allows me to ask "how wide is this string in this font". I found qfontmetrics which looks spot on, but is C++. Obviously, including emojis!

With this I can make the tools I current have which produce svg output (to later be converted to PDF or PNG, etc) work out when to set a line width, or break blocks of text, and work with normal svg.

All of this is a doddle in postscript, but unless someone has a patch for gs to handle utf-8 strings natively and handle a fuller character set with the likes of emojis, I need to move away from postscript, hence using svg. Just hitting this key stumbling block for now.

Update: Thanks for all the comments. I am looking at freetype at the moment. It looks like it has exactly what I need, but slightly struggling with Emojis and the like at the moment :-)

Update: Yes, FreeType has simple C functions to load a font/face and find the size of glyphs based on unicode characters, and simple to tell it does not have the character and use a noto/emoji font instead, etc. This should be simple to then work out line wrapping and sizes for SVG with tspan for emojis and the like. Now I know it is all possible and how to do it, I have to think about the project for which I was asking this - a new system for designing printed plastic cards...