Font spacing changes

[NathanWailes]

What did you do?

1. I'm using Pillow to create many individual images which I then stitch together to create a lyrics video for a song.
   • The app is online at https://www.rhymecraft.guru
2. One of the features of the videos created by my app is that, while showing an entire line of lyrics on-screen at once, the currently-pronounced syllable can be highlighted.
   • You can see an example here: https://www.youtube.com/watch?v=9u9ylseLAfU
3. The way I achieve this is by:
   1. first calculating where the X, Y coordinates of the line would start if the entire line of lyrics was drawn at once
   2. then drawing the text preceding the highlighted syllable and recording the width of that text,
   3. then drawing the highlighted syllable, using the original X, Y coordinates and the width of the preceding text to calculate where the highlighted syllable's X, Y coordinates should start,
   4. then proceeding in the same way to draw the text following the highlighted syllable.

What did you expect to happen?

I expected that the current syllable would change color without any other visible changes.

What actually happened?

The text spacing always doesn't seem to work totally right, so the lyrics sometimes get spaced out.

You can see it:

• caused by the word 'of' at 0:47: https://www.youtube.com/watch?v=9u9ylseLAfU&t=47s
• in the word 'paradise' at 1:03: https://www.youtube.com/watch?v=9u9ylseLAfU&t=1m3s

What are your OS, Python and Pillow versions?

• OS: Windows 10 (local machine), Ubuntu (Digital Ocean)
• Python: 3.7
• Pillow: 5.0.0

Example code:

from PIL import ImageDraw, Image, ImageFont

img = Image.new('RGBA', (200, 60), color=(0, 0, 0))
draw = ImageDraw.Draw(img)
font = ImageFont.truetype('arial.ttf', size=48)
first_font_color = (255, 0, 0)
second_font_color = (255, 255, 255)

draw.text((0, 0), 'paradise', first_font_color, font=font)

draw.text((0, 0), 'par', second_font_color, font=font)
par_width, par_height = draw.textsize('par', font=font)
draw.text((0 + par_width, 0), 'adise', second_font_color, font=font)

img.save('example.png')

There's first a red 'paradise' created, then a white 'paradise' created in the same spot. If you zoom in you'll notice that the red one shows up underneath the white one starting with the 'a' and then that continues for the 'dise':

[radarhere]

Could you put together a simple script demonstrating the problem?

[NathanWailes]

@radarhere I've updated the first post with a simple example.

[radarhere]

What do you think of working from the end instead, subtracting the width of 'adise' from the width of 'paradise'?

from PIL import ImageDraw, Image, ImageFont

img = Image.new('RGBA', (200, 60), color=(0, 0, 0))
draw = ImageDraw.Draw(img)
font = ImageFont.truetype('arial.ttf', size=48)
first_font_color = (255, 0, 0)
second_font_color = (255, 255, 255)

draw.text((0, 0), 'paradise', first_font_color, font=font)

draw.text((0, 0), 'par', second_font_color, font=font)
par_width = draw.textsize('paradise', font=font)[0] - draw.textsize('adise', font=font)[0]
draw.text((0 + par_width, 0), 'adise', second_font_color, font=font)

img.save('example.png')

As to why this works better, I think it's because not all gaps between letters are the same. If you look at the pixels, there is zero gap between 'r' and the following 'a', but there are 3 pixels between the second 'a' and the following 'd'. On an abstract level, I think this also better describes your goal - you're not writing 'adise' after 'par' - you're writing 'aside' at the end of 'paradise'.

[NathanWailes]

@radarhere Thanks for the suggestion, I'll give that a try. I didn't think to try that because I didn't know it would make a difference. I'll close the ticket for now and reopen it if it doesn't work for some reason (although I can see that for this example it does work).

[NathanWailes]

That proposed fix does not seem to work in every case. As an example, consider the string "Ayo", with the "A" and "yo" being drawn separately:

from PIL import ImageDraw, Image, ImageFont

img = Image.new('RGBA', (200, 60), color=(0, 0, 0))
draw = ImageDraw.Draw(img)
font = ImageFont.truetype('arial.ttf', size=48)
first_font_color = (255, 0, 0)
second_font_color = (255, 255, 255)

draw.text((0, 0), 'Ayo', first_font_color, font=font)

draw.text((0, 0), 'A', second_font_color, font=font)
par_width = draw.textsize('Ayo', font=font)[0] - draw.textsize('yo', font=font)[0]
draw.text((0 + par_width, 0), 'yo', second_font_color, font=font)

img.save('example.png')

Here's the result:

[radarhere]

I'm not able to replicate this on my macOS machine. Does this happen for you on Ubuntu?

While unlikely, I don't suppose that the problem is just that some of the pixels being drawn are translucent?

[NathanWailes]

@radarhere I just confirmed it's happening on my Digital Ocean (Ubuntu) machine.

The issue seems to be the kerning between the letters 'A' and 'y'. I tried a fix where I would manually subtract from the preceding_text_width if the preceding_text_width + following_text_width was larger than the full_text_width (as recommended here), but that also does not work consistently, as different letter pairs seem to have different amounts of kerning even after making that adjustment.

[radarhere]

You may or may not be interested in this - as a workaround for your situation, instead of drawing 'Ayo' in red and then 'A' and 'yo' in white and finding they don't quite match, you could instead draw 'A' and 'yo' in red and then 'A' and 'yo' in white, always breaking the writing up into the final segments.

[NathanWailes]

@radarhere That workaround had occurred to me, and I'll keep it in mind, but I'm going to see if I can make it work with the kerning. I looked around and I think I found a way to extract the kerning values from the font's TTF file using the 'fontforge' library, and I'm going to see if I can use that to reliably adjust the distance between the two characters.

[radarhere]

Despite not being able to replicate, how's this for another idea?

If the problem is that the 'y' in 'Ayo' is moved right by the presence of the 'A', then what if we always wrote 'Ayo', and cropped and pasted the result to get the effect?

from PIL import ImageDraw, Image, ImageFont

img = Image.new('RGBA', (200, 220), color=(0, 0, 0))

draw = ImageDraw.Draw(img)
font = ImageFont.truetype('Arial.ttf', size=48)
first_font_color = (255, 0, 0)
second_font_color = (255, 255, 255)

for i, parts in enumerate([
	['Ayo',''],
	['A','yo'],
	['Ay','o'],
	['','Ayo']
]):
	first, second = parts
	x = 0
	y = i*50
	if first and second:
		draw.text((x, y), 'Ayo', first_font_color, font=font)

		im2 = Image.new('RGBA', (200, 220))
		draw2 = ImageDraw.Draw(im2)
		draw2.text((0, 0), 'Ayo', second_font_color, font=font)
		w = draw2.textsize('Ayo', font=font)[0] - draw2.textsize(second, font=font)[0]
		cropped_im = im2.crop((w, 0, 220, 220))
		img.paste(cropped_im, (x+w, y), cropped_im)
	elif first:
		draw.text((x, y), 'Ayo', first_font_color, font=font)
	else:
		draw.text((x, y), 'Ayo', second_font_color, font=font)

img.save('example.png')