Grille harmonique renderer
The grigson-grille-harmonique-renderer package renders .chart files
as French jazz-style grilles harmoniques — each bar is a square, subdivided diagonally
to show how many chords fall within it.
Example
Whisper Not (4 bars per row on narrow screens, 8 bars per row on wider screens):
Constraints
- 4/4 only. Non-4/4 time signatures cause a render error.
- Quarter-note granularity. Chord durations must be whole quarter notes (1, 2, 3, or 4 beats).
- 8 bar patterns are supported:
1,2+2,3+1,1+3,2+1+1,1+2+1,1+1+2, and1+1+1+1. - Simile bars (same chord cells as the previous bar) render as a
%glyph in a plain square.
CLI
# HTML fragment (default)
grigson-grille-harmonique-renderer my-chart.chart
# Standalone HTML page, open in browser
grigson-grille-harmonique-renderer --format standalone my-chart.chart > chart.html
open chart.html
# From stdin
cat my-chart.chart | grigson-grille-harmonique-rendererCLI options
| Option | Default | Description |
|---|---|---|
--format <fmt> | html | html (fragment) or standalone (full page) |
--notation-preset <name> | — | Named preset, e.g. realbook |
--notation-preset-file <path> | — | JSON file with partial NotationPreset |
--bars-per-line <n> | 4 | Bars per row |
--accidentals <mode> | unicode | unicode (♭♯) or ascii (b#) |
Custom element
The package registers the grigson-grille-harmonique-renderer custom element,
which implements the GrigsonRendererElement interface and can be used with
<grigson-chart>.
<script type="module" src="grigson-grille-harmonique-renderer-register.esm.js"></script>
<grigson-chart>
<grigson-grille-harmonique-renderer bars-per-line="8"></grigson-grille-harmonique-renderer>
<template>
...chart source...
</template>
</grigson-chart>Observed attributes
| Attribute | Default | Description |
|---|---|---|
notation-preset | — | Named notation preset |
bars-per-line | 4 | Bars per row |
accidentals | unicode | unicode or ascii |
typeface | sans | serif, sans, or cursive |
CSS custom properties
These properties can be set on the chart element or any ancestor:
| Property | Default | Description |
|---|---|---|
--cg-grid-width | 2px | Width of grid lines between bars |
--cg-diag-width | 0.5px | Thickness of diagonal lines inside bars |
--cg-diag-style | solid | Style of diagonal lines: solid, dashed, or dotted |
--cg-bar-w | 6.5rem | Width of each bar square |
--cg-bar-h | 6.5rem | Height of each bar square |
part attributes
Every rendered element carries a part attribute for styling:
| Part | Element |
|---|---|
chart | Outer chart container |
section, section-label, section-rows | Section wrapper, label, and row container |
row | Row of bars |
bar | Individual bar square |
bar-1, bar-2-2, bar-3-1, bar-1-3, bar-2-1-1, bar-1-2-1, bar-1-1-2, bar-1-1-1-1 | Pattern modifier on bar |
bar-simile | Simile bar (shows %) |
line + type modifier | Diagonal and vertical divider lines: line-diag ("/"), line-anti ("\"), line-diag-tl, line-diag-br, line-anti-tr, line-anti-bl (half-length variants), line-vert (vertical) |
chord, chord-root, chord-accidental, chord-quality | Chord label parts |
chord-slash, chord-top, chord-fraction-line, chord-bass | Slash chord parts (e.g. C/E) |
song-header, song-title, song-key | Header block parts |
Example: larger bars with thicker lines
[part~="chart"] {
--cg-bar-w: 7rem;
--cg-bar-h: 7rem;
--cg-grid-width: 4px;
}