Pyglet: why does the text in my example become fuzzy when I resize the window? - pyglet

Question

In the following toy example, I have a text layout in a resize-able window. When the window is re-sized, the text becomes fuzzy for some resolutions (give it a try). Why is that?
import pyglet
width, height = 500, 500
window = pyglet.window.Window(width, height, resizable=True)
batch = pyglet.graphics.Batch()
document = pyglet.text.document.FormattedDocument()
document.insert_text(0, 'Hello world!', attributes=dict(font_name='Arial', font_size=12, color=(255, 255, 255, 255)))
layout = pyglet.text.layout.IncrementalTextLayout(document, width, height, multiline=True, batch=batch)
# for drawing graphics
pyglet.gl.glLineWidth(3)
outline = batch.add(4, pyglet.gl.GL_LINE_LOOP, None, ('v2f', (0, 0, width, 0, width, height, 0, height)), ('c4B', (255, 0, 0, 0)*4))
#window.event
def on_resize(width, height):
document.delete_text(0, len(document.text))
document.insert_text(0, "Layout has been resized to {}x{}".format(0.9*width, 0.9*height))
layout.width = 0.9*width
layout.height = 0.9*height
layout.x = (width - layout.width)*0.5
layout.y = (height - layout.height)*0.5
outline.vertices = (layout.x, layout.y, layout.width + layout.x, layout.y, layout.width + layout.x, layout.height + layout.y, layout.x, layout.height + layout.y)
#window.event
def on_draw():
window.clear()
batch.draw()
pyglet.app.run()

Answer 1

Things start to become wonky because the layout is being given decimal width and height. Fixing that removes the fuzzy text issues:
import pyglet
width, height = 500, 500
window = pyglet.window.Window(width, height, resizable=True)
batch = pyglet.graphics.Batch()
document = pyglet.text.document.FormattedDocument()
document.insert_text(0, 'Hello world!', attributes=dict(font_name='Arial', font_size=12, color=(255, 255, 255, 255)))
layout = pyglet.text.layout.IncrementalTextLayout(document, width, height, multiline=True, batch=batch)
# for drawing graphics
pyglet.gl.glLineWidth(3)
outline = batch.add(4, pyglet.gl.GL_LINE_LOOP, None, ('v2f', (0, 0, width, 0, width, height, 0, height)), ('c4B', (255, 0, 0, 0)*4))
#window.event
def on_resize(width, height):
width, height = int(width), int(height)
window.set_size(width, height)
layout_width, layout_height = int(0.9*width), int(0.9*height)
document.delete_text(0, len(document.text))
document.insert_text(0, "Layout has been resized to {}x{}".format(layout_width, layout_height))
layout.width, layout.height = layout_width, layout_height
layout.x = int((width - layout_width)*0.5)
layout.y = int((height - layout_height)*0.5)
outline.vertices = (layout.x, layout.y, layout.width + layout.x, layout.y, layout.width + layout.x, layout.height + layout.y, layout.x, layout.height + layout.y)
#window.event
def on_draw():
window.clear()
batch.draw()
pyglet.app.run()

Answer 2

I had the same problem and I made it work like this:
You will need a wrapper class which will have the on_resize event handler. Also it needs the parent window.
class Label(pyglet.text.Label):
def __init__(self, window,**kwargs):
self.window = window
self.window.push_handlers(self)
self.init_settings = dict()
for k,v in kwargs.items():
if callable(v):
kwargs[k] = v(self.window)
self.init_settings[k] = v
super().__init__(**kwargs)
def on_resize(self, width, height):
for k,v in self.init_settings.items():
setattr(self,k,v(self.window))
Usage:
Each property you need to update on resizing the window will be a lambda function. Here you should write the initial values of the label with the initial window sizes.
class WindowSubclass(pyglet.window.Window):
def __init__(self,*args,**kwargs):
self.initial_size = self.width,self.height
self.label = Label(window=self,
text='PAUSED',
multiline=False,
font_name='Times New Roman',
bold=True,
font_size=lambda win:24*win.height/win.initial_height,
width=lambda win:win.width/4,
x=lambda win:win.width/2,
y=lambda win:win.height/2,
color=(255, 255, 255, 255),
anchor_x='center', anchor_y='center')