Word spacing

Word spacing is a new feature that allows you to better control the how much space is left between words. In unjustified text, the space between words is set by the size of the space character in the font. Different fonts may look better with more or less space, and so the font designer specifies a preferred width for the space the font is created. But you can choose to have your text set looser or tighter by adjusting the space between the words as a percentage of what is defined in the font.

In justified text, the text is aligned on both edges to the margin, and the width of the spaces is adjusted to make this happen. Spaces may be compressed or expanded so that the text may best fit the column. Now you can control the minimum and maximum size of the spaces in justified text, as a percentage of the size of the space in the font.

The new property is called wordSpacing. It goes on paragraphs (or it can be inherited from the TextFlow, div or list that the paragraph is in) and it is an array of three percentages. The first is the desired or optimal space width. The second is the minimum space width, and the last is the maximum space width.

Here’s an example with default settings (wordSpacing=”100%,50%,150%”):

This is the same text, but with the optimal wordSpacing set to 80% (wordSpacing=”80%,50%,150%”). It is slightly tighter, and manages to fit the text in one less line:

This is the same text again, but set looser, with wordSpacing=”140%,50%,150%”

You can also get changes to justified text just by changing the minimum and maximum spacing values. These are more subtle differences, but can be very useful. Here’s an example using default wordSpacing (100%,50%,150%) with justified text:

Here’s the same text set very slighly tighter by adjusting minimum & maximum (wordSpace=”100%,30%,130%”):

And this is the same again set a little more loosely (wordSpace=”100%,80%,200%”):