Letter on a background

A how-to guide: set large lettering in front of a coloured panel, so the word sits on a field rather than on the frame’s black.

from sextile import Custom, OnOneFrame, Page, PageLayout, PageRequest, PageRouter, Sextile
from sextile.viewdata import lettering
from sextile.viewdata.canvas import Canvas
from sextile.viewdata.composition import Align, Composition
from sextile.viewdata.controls import Colour
from sextile.viewdata.font import load_font

_FACE = load_font("acorn")

router = PageRouter()


@router.page("1", name="panel", title="Panel")
async def panel(request: PageRequest) -> Page:
    def draw(canvas: Canvas, row: int) -> None:
        layout = Composition()
        box = layout.panel(row, 18, width=20, colour=Colour.BLUE, rows=3)
        lettering.place(layout, Align.CENTRE, "NEWS", _FACE, Colour.CYAN, within=box)
        layout.draw(canvas)

    return PageLayout(parts=[OnOneFrame(Custom(rows=3, draw=draw))]).build(request)


app = Sextile(name="News", pages=[*router])

 PANEL                                1a
  
                     🬹 🬹🬦🬚🬋🬃🬹 🬦🬓🬵🬋🬱     
                     █🬪█▐🬛🬋 █🬷🬷▌🬊🬋🬱     
                     🬎 🬎🬉🬌🬋🬃🬎🬀🬊🬄🬊🬋🬆     
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
  
 0 index                                

Composition.panel(row, column, width=, colour=, rows=) declares a coloured box once and returns it; a run placed within that box inherits its background and is centred in the box rather than on the frame. Align.CENTRE centres the lettering horizontally within the panel; a column number places it instead.

For a masthead’s full-width stripe, see Large lettering; for the panels, alignment and the arithmetic a Composition checks before it draws, see Compose a frame. A coloured background costs three cells, since the hardware has only NEW_BACKGROUND — the graphics explanation gives the cost of each attribute.