Practice/Stripe/Bit Font Renderer

Bit Font Renderer

CodingMust

Problem Overview

You are building a text rendering system that displays characters using bitmap fonts. In a bitmap font, each character is represented as a grid of pixels, where each pixel is either "on" (filled) or "off" (empty).

The problem is divided into three progressive parts:

• Single Character Rendering: Convert a binary grid (0s and 1s) into a visual representation using . for empty pixels and # for filled pixels
• Word Rendering: Render multiple characters side by side to display a word or sentence
• Run-Length Encoded Fonts: Support fonts that use run-length encoding (RLE) for compact storage

Important Notes

• There are multiple parts to this problem -- ask the interviewer how many parts there are to better manage your time
• Start with the simplest approach and extend it as parts get more complex
• Write your own test cases and ensure your code compiles and runs correctly

Part 1: Single Character Rendering

Implement a function render_character(grid) that takes a binary grid (list of strings containing 0s and 1s) and returns the rendered output where:

• 0 is replaced with . (empty pixel)
• 1 is replaced with # (filled pixel)

Input Format

Each character is represented as a list of strings, where each string is a row of the character grid containing only 0 and 1.

`

Example: Letter 'J' represented as a 5x7 bitmap

letter_j = [ "0000000", "0001000", "0001000", "0101000", "0010000" ] `

Example

` grid = [ "0000000", "0001000", "0001000", "0101000", "0010000" ]

render_character(grid)

Returns:

[

".......",

"...#...",

"...#...",

".#.#...",

"..#...."

]

`

When printed line by line:

....... ...#... ...#... .#.#... ..#....

Requirements

• Handle grids of any size (rows and columns may vary)
• Return a list of strings in the same format as the input
• Only 0 and 1 characters will appear in the input

Part 2: Word Rendering

Extend your solution to implement render_word(text, font) that renders multiple characters side by side to form a word or sentence. Each character's columns should be concatenated horizontally.

Input Format

The font is a dictionary with a "face" name and a "chars" mapping from character to its bitmap representation:

font = { "face": "Simple Font", "chars": { "H": ["10001", "10001", "11111", "10001", "10001"], "I": ["111", "010", "010", "010", "111"] } }

Example

` font = { "face": "Simple Font", "chars": { "H": ["10001", "10001", "11111", "10001", "10001"], "I": ["111", "010", "010", "010", "111"] } }

render_word("HI", font)

Returns:

[

"#...####",

"#...#.#.",

"#####.#.",

"#...#.#.",

"#...####"

]

`

When printed:

#...#### #...#.#. #####.#. #...#.#. #...####

Requirements

• Characters are placed side by side horizontally (no spacing between characters)
• All characters in a font have the same height (number of rows)
• Character widths may vary within the same font
• Handle empty strings by returning an empty list
• The conversion from binary to visual representation should happen after concatenation

Clarification Questions to Ask

• Should there be spacing between characters?
• Can character heights vary within the same font?
• How should we handle characters not present in the font dictionary?

Part 3: Run-Length Encoded Fonts

Some fonts use run-length encoding (RLE) for compact storage. Instead of storing each pixel individually, RLE stores the length of consecutive runs of the same value.

Implement decode_rle(encoded_rows) that decodes RLE-encoded character data.

Encoding Rules

• Each row is encoded as a string of characters representing run lengths
• Runs alternate between "off" (0) and "on" (1) pixels, starting with "off"
• Digits 0-9 represent run lengths 0-9
• Letters a-z represent run lengths 10-35 (where a=10, b=11, ..., z=35)

Example

`

Encoding example:

Original row: "0000011100" (5 zeros, 3 ones, 2 zeros)

Encoded: "532" (5 off, 3 on, 2 off)

encoded_char = [ "532", # 5 off, 3 on, 2 off -> "0000011100" "343", # 3 off, 4 on, 3 off -> "0001111000" "a0", # 10 off, 0 on -> "0000000000" "19", # 1 off, 9 on -> "0111111111" ]

decode_rle(encoded_char)

Returns:

[

"0000011100",

"0001111000",

"0000000000",

"0111111111"

]

`

After rendering with render_character:

.....###.. ...####... .......... .#########

Combined Usage

Once decode_rle is implemented, you can combine it with the earlier functions to render words from RLE-encoded fonts:

` rle_font = { "face": "Compressed Font", "encoding": "rle", "chars": { "A": ["212", "11111", "05", "0131", "0131"] # "212" -> ..#.. (2 off, 1 on, 2 off) # "11111" -> .#.#. (1 off, 1 on, 1 off, 1 on, 1 off) # "05" -> ##### (0 off, 5 on) # "0131" -> #...# (0 off, 1 on, 3 off, 1 on) } }

Decode, then render

decoded = decode_rle(rle_font["chars"]["A"]) rendered = render_character(decoded)

Result: ["..#..", ".#.#.", "#####", "#...#", "#...#"]

`

Requirements

• Runs always start with "off" (0) pixels
• Runs alternate: off, on, off, on, ...
• Digits 0-9 represent their numeric value
• Letters a-z represent values 10-35
• All rows should decode to the same width (the font is monospaced after decoding)
• After decoding, apply the same rendering logic from Part 1