Repository files navigation

A typeface for rendering vertical bars data: waveforms, spectrums, diagrams, histograms, columns etc.

Playground  •  Google fonts  •  V-fonts  •  Wavearea

PlaceWavefont[ROND,YELA,wght].woff2 into your project directory and use this code:

<style>@font-face {font-family: wavefont;font-display: block;src: url(./Wavefont[ROND,YELA,wght].woff2) format('woff2');}.wavefont {--wght:400;font-family: wavefont;font-variation-settings:'wght'var(--wght),'ROND'30,'YELA'0;}</style><!-- Set values manually --><textareaid="waveform"class="wavefont"cols="100">abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</textarea><script>// Set values programmatically (more precise)waveform.textContent=Array.from({length:100},(_,i)=>String.fromCharCode(0x100+i)).join('')</script>

Wavefont bars correspond to values from 0 to 100, assigned to different characters:

• 0-9 chars are for simplified manual input with step 10 (bar height = number).
• a-zA-Z for manual input with step 2, softened at edgesa andZ (bar height = number of letter).
• U+0100-017F for 0..127 values with step 1 (char = String.fromCharCode(0x100 + value)).

To adjust axes via CSS:

.wavefont {font-variation-settings:'wght'var(--wght,40),'ROND'var(--rond,0),'YELA'var(--align,0);letter-spacing:1ch;/* 1ch unit === 1 bar width */}

• Ranges, values and width is compatible withlinefont, so fonts can be switched preserving visual coherency.
• Visible charcodes fall undermarking characters unicode category, ie. recognized as word by regexp and can be selected withCtrl +→ or double click. Eg. waveform segments separated by or- are selectable by double click.
• Characters outside of visible ranges are clipped to0, eg.,\t etc.
• -–._* map to1 value,| maps to max value,▁▂▃▄▅▆▇█ map to corresponding bars.
• Accent acute ́ (U+0301) shifts bar 1-step up, circumflex accent ̂ (U+0302) 10-steps up. Eg.\u0101\u0302\u0302\u0301\u0301\u0301 shifts 23 steps up.
• Accent grave ̀ (U+0300) shifts bar 1-step down, caron ̌ (U+030C) shifts 10 steps down, eg.\u0101\u030c\u0300\u0300\u0300 shifts 13 steps down.
• Caret span is -20..120, so line-height = 1.4 is minimal non-overlapping selection.

Optional wavefont package exposes a function that calculates string from values for your convenience.

importwffrom'wavefont'// get characters for values from 0..127 rangewf(0,1,50,99,127, ...)// ĀāIJţŤ...

make build

• Tests
• Glyphs
• Text
• Waterfall

• linefont − font-face for rendering linear data.

• Google Fonts guide.
• Unified font object spec − unified human-readable format for storing font data.
• Feature file spec − defining opentype font features.
• Adobe-variable-font-prototype − example variable font.
• Designspace XML spec − human-readable format for describing variable fonts.
• Adobe Blank − blank characters variable font.
• Sparks – alternative font with similar purpose.

🕉