Ragged Blocks: Rendering Structured Text with Style

TL;DR

This paper introduces a novel layout algorithm for rendering structured text with rich, nested styles using ragged blocks, enabling more compact and visually expressive text visualizations without disrupting typographic layout.

Contribution

The paper presents a new layout algorithm that generates ragged blocks for nested styled text, improving compactness and visual expressiveness over traditional rectangular layouts.

Findings

Ragged block layouts are more compact than conventional rectangular layouts.

The algorithm effectively handles nested styling with minimal disruption to text layout.

Evaluations on source code benchmarks demonstrate improved visual representation.

Abstract

Whether it be source code in a programming language, prose in natural language, or otherwise, text is highly structured. Currently, text visualizations are confined either to _flat, line-based_ decorations, which can convey only limited information about textual structure, or _nested boxes_, which convey structure but often destroy the typographic layout of the underlying text. We hypothesize that the lack of rich styling options limits the kinds of information that are displayed alongside text, wherever it may be displayed. In this paper, we show that it is possible to achieve arbitrarily nested decorations while minimally disturbing the underlying typographic layout. Specifically, we present a layout algorithm that generates _ragged blocks_, or _rocks_, which are rectilinear polygons that allow nested text to be compactly rendered even when styled with borders and padding. Our layout algorithm is evaluated on a benchmark suite comprising representative source code files in multiple programming languages. The (ragged block) layouts produced by our algorithm are substantially more compact than the (rectangular block) layouts produced by conventional techniques, when uniformly styling every element in the syntax tree with borders and padding.