Inkscape rant on multi-line text

1 comments

Okay, so I love Inkscape. It's a free vector-based drawing program that is almost standards compliant. Why 'almost'? Well, sadly the SVG 1.1 specification does not cover a crucial aspect of websites, art, marketing, lithography, and desktop publishing: multi-line text.

The specification bluntly states:

"SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:

  • The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text).
  • The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters which start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.)
  • Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)"
So, it's not elegant or convenient, but at least you have your options. What did Inkscape, the open source leader in the field, do? Implement a totally non-standard flowRoot approach mentioned briefly in the SVG 1.2 DRAFT, before that approach was removed altogether! In addition, it added a totally non-standard style tag called -inkscape-font-specification.

Instead of fixing the problem, they still default to flowRoot and half-heartedly suggest to anyone that complains that they should use the SVG Tiny 1.2 textArea approach.

Here's a novel idea...how about using a tspan solution as suggested by the SVG 1.1 specification above, support em line spacing, and @font-face!?!

<end of rant />

Various web font techniques

0 comments

Cool fonts are everywhere: magazines, billboards, clothing, product labels, tattoos... you get the picture. Surprisingly, the Internet itself (with all its awesome power and technical advancement) is practically devoid of typography. For example, the only fonts you can be almost absolutely certain to exist on Windows, Mac, and Linux machines are:

  • Helvetica (some operating systems substitute Arial)
  • Courier
  • Times

Since many Linux users also install the ttf-mscorefonts / msttcorefonts package, you have a moderate assurance these fonts are available as well:
  • Arial Black
  • Comic Sans MS
  • Georgia
  • Impact
  • Trebuchet MS
  • Verdana
  • Webdings (no Unicode characters)

So there you have it, of the millions of fonts in existence, Internet users can enjoy a grand total of ten (this is where you start to cry and take anti-depressant medication). Fortunately, creative human beings have ventured to resist this limitation by proposing alternatives. Each option has its own pros and cons as described below:

Embedded OpenType (EOT)
  • Date announced: September 1997 (IE 4.0)
  • Brief description: Proprietary font standard supported exclusively by Internet Explorer
  • Dependencies:
  • Difficulty to set up: Easy
  • TTF font converter: eotfast
Scalable Inman Flash Replacement (sIFR)
  • Date announced: April 2005
  • Brief description: Uses Adobe Flash to render font
  • Dependencies: JavaScript, Flash
  • Difficulty to set up: Hard
  • TTF font converter: sIFR Generator
GFX Text
  • Date announced: August 2007
  • Brief description: Uses VML TextPath element and SVG Text element to display text (supports CSS styling so can be combined with EOT, WOFF, or Google Web Fonts)
  • Dependencies: JavaScript
  • Difficulty to set up: Medium
  • TTF font converter:
Cufón
  • Date announced: June 2008
  • Brief description: Uses VML and Canvas to draw text as vector paths
  • Dependencies: JavaScript
  • Difficulty to set up: Medium
  • TTF font converter: shoqolate.com
Facelift Image Replacement (FLIR)
  • Date announced: August 2008
  • Brief description: Sends text to server-side PHP/GD to render as image
  • Dependencies: JavaScript, PHP, GD
  • Difficulty to set up: Hard
  • TTF font converter:
GFX VectorText
  • Date announced: September 2008
  • Brief description: Uses VML and SVG to draw text as vector paths
  • Dependencies: JavaScript
  • Difficulty to set up: Hard
  • TTF font converter: ttf2svg
Web Open Font Format (WOFF)
  • Date announced: October 2009
  • Brief description: W3C standard (working draft) for web fonts
  • Dependencies:
  • Difficulty to set up: Easy
  • TTF font converter: @font-face Generator
Google Web Fonts
  • Date announced: May 2010
  • Brief description: Dynamically serves EOT fonts for IE and WOFF fonts for other browsers (open font license)
  • Dependencies: optional JavaScript WebFont Loader
  • Difficulty to set up: Easy
  • TTF font converter:





EOTsIFRGFX TextCufónFLIRGFX VectorTextWOFFGoogle Web Fonts
Cross-browser (IE, Firefox, Chrome, Safari, and Opera)NoYesPartial1YesYesYesNoYes
Avoids legal EULA complicationsNoYesNoNoYesNoNoYes
A11y (visual impaired accessible) / SEO friendlyYesYesNoNoYesNoYesYes
Font is compressedYesYesYesYesYesNoYesYes
Avoids FOUT issueYesNoNoYesNoYesPartial2Partial2
Can change text size without page reloadYesNoYesNoNoYesYesYes


Notes:

1. VML does not support EOT fonts. Per Microsoft: "Embedded fonts are not accessible to Microsoft Internet Explorer structured graphics [forerunner of VML] or DirectAnimation controls: We have confirmed that these controls only work with fully installed fonts and not embedded fonts". The only workaround for Internet Explorer users is to install the TTF font locally or use Google Chrome Frame, if the website supports it.

2. Firefox will display a default font while the web font is downloading, then redisplay the text using the web font, causing an annoying flicker effect that has been dubbed "Flash Of Unstyled Text" (FOUT). Google's WebFont Loader events can be used to avoid this for regular text. However, this workaround doesn't solve the issue for SVG Text elements.

3. Internet Explorer has a security setting called "Font Download" that can be disabled to block web fonts. Fortunately, this deeply hidden setting is enabled by default (allowing the use of EOT fonts).

4. Web browsers on Windows XP often have issues with anti-aliasing (i.e. jagged edges appear on text) because ClearType is disabled by default. For Firefox, enabling ClearType will often fix the problem, but in some cases using "Standard" font smoothing has a better result. For Internet Explorer, a clever fix can be found here.

5. Finding the width and height of text is complex and problematic. The easiest way is to use offsetWidth & offsetHeight but these values do not provide a tight bounding box of the text (especially height) so using a vector path-based approach may be preferred if extreme control over size and positioning is required.

6. Assuming the desired font is installed locally (see note #1), VML in IE7 and IE8 still require one more tweak: only one font name can be used (no backup font specified) and that name needs to be surrounded by single or double-quotes in addition to the CSS single or double-quotes used to enclose a string. For example: font-family:"'Verdana'"; (notice the double and single quotes used on both sides of Verdana)

7. SVG fonts are vulnerable to additional security risks, such as embedding an <iframe> in a glyph.


For more information on font comparison, see MIT, MediaWiki font issues, Six Revisions, SocialCompare, Wikipedia, Typekit, or Mozilla.