Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Code Style Sheets: CSS for Code

Sam Cohen, Ravi Chugh

TL;DR

The paper introduces code style sheets, a CSS-inspired framework for styling code by selecting elements from an $AST$ and rendering them as richly annotated displays. It addresses two core goals: linking AST values to their visual representation and compactly laying out nested, multi-line program text using $S$-blocks, validated by a Hass prototype for a subset of $Haskell$. The approach preserves provenance from the AST to the display, enabling semantic decorations that incorporate syntax, types, and run-time information, and it provides a layout pipeline that yields compact, nested presentations closer to original code. This framework could inform future editors and structure/projectional tools by enabling flexible, task-specific program visualizations beyond traditional flat syntax highlighting.

Abstract

Program text is rendered using impoverished typographic styles. Beyond choice of fonts and syntax-highlighting colors, code editors and related tools utilize very few text decorations. These limited styles are, furthermore, applied in monolithic fashion, regardless of the programs and tasks at hand. We present the notion of _code style sheets_ for styling program text. Motivated by analogy to cascading style sheets (CSS) for styling HTML documents, code style sheets provide mechanisms for defining rules to select elements from an abstract syntax tree (AST) in order to style their corresponding visual representation. Technically, our selector language generalizes essential constructs from CSS to a programming-language setting with algebraic data types (such as ASTs). Practically, code style sheets allow ASTs to be styled granularly, based on semantic information -- such as the structure of abstract syntax, static type information, and corresponding run-time values -- as well as design choices on the part of authors and readers of a program. Because programs are heavily nested in structure, a key aspect of our design is a layout algorithm that renders nested, multiline text blocks more compactly than in existing box-based layout systems such as HTML. In this paper, we design and implement a code style sheets system for a subset of Haskell, using it to illustrate several code presentation and visualization tasks. These examples demonstrate that code style sheets provide a uniform framework for rendering programs in multivarious ways, which could be employed in future designs for text-based as well as structure editors.

Code Style Sheets: CSS for Code

TL;DR

The paper introduces code style sheets, a CSS-inspired framework for styling code by selecting elements from an and rendering them as richly annotated displays. It addresses two core goals: linking AST values to their visual representation and compactly laying out nested, multi-line program text using -blocks, validated by a Hass prototype for a subset of . The approach preserves provenance from the AST to the display, enabling semantic decorations that incorporate syntax, types, and run-time information, and it provides a layout pipeline that yields compact, nested presentations closer to original code. This framework could inform future editors and structure/projectional tools by enabling flexible, task-specific program visualizations beyond traditional flat syntax highlighting.

Abstract

Program text is rendered using impoverished typographic styles. Beyond choice of fonts and syntax-highlighting colors, code editors and related tools utilize very few text decorations. These limited styles are, furthermore, applied in monolithic fashion, regardless of the programs and tasks at hand. We present the notion of _code style sheets_ for styling program text. Motivated by analogy to cascading style sheets (CSS) for styling HTML documents, code style sheets provide mechanisms for defining rules to select elements from an abstract syntax tree (AST) in order to style their corresponding visual representation. Technically, our selector language generalizes essential constructs from CSS to a programming-language setting with algebraic data types (such as ASTs). Practically, code style sheets allow ASTs to be styled granularly, based on semantic information -- such as the structure of abstract syntax, static type information, and corresponding run-time values -- as well as design choices on the part of authors and readers of a program. Because programs are heavily nested in structure, a key aspect of our design is a layout algorithm that renders nested, multiline text blocks more compactly than in existing box-based layout systems such as HTML. In this paper, we design and implement a code style sheets system for a subset of Haskell, using it to illustrate several code presentation and visualization tasks. These examples demonstrate that code style sheets provide a uniform framework for rendering programs in multivarious ways, which could be employed in future designs for text-based as well as structure editors.

Paper Structure

This paper contains 91 sections, 5 equations, 31 figures.

Table of Contents

  1. Introduction
  2. A Motivating Scenario
  3. Step 1: Debugging a Binary Operation Error
  4. Step 2: Debugging a Filter Predicate Error
  5. Step 3: Resolving a Point-Free Pipeline Warning
  6. Step 4: Updating User Preferences
  7. Cascading Style Sheets (CSS) for Code
  8. Design Goal: Selecting AST Values, Styling the View
  9. Design Goal: Compact Layout for Nested Text
  10. Contributions
  11. Scope
  12. Flat vs. Nested Displays
  13. Text, Blocks, and Projections
  14. Tooling for Decorating Program Text
  15. Flat and Nested Displays in HTML
  16. ...and 76 more sections

Figures (31)

  • Figure 1: Count Lines of Code (CLOC) Program with Type Error and Blocks Style Sheets
  • Figure 2: Projection Boxes Style Sheet
  • Figure 3: Point-Free Pipeline and User Customized Style Sheets
  • Figure 4: Standard Pipeline for Styling Code. Style sheets refer to the document being displayed, not the code itself.
  • Figure 5: S-Blocks. Three types: single-line, two-line without overlap, and multiline. Shapes resemble selected-text regions in existing GUIs.
  • ...and 26 more figures