Skip to content

Latest commit

 

History

History
93 lines (63 loc) · 3.47 KB

readme.md

File metadata and controls

93 lines (63 loc) · 3.47 KB
Raw

linefont build

Typeface for rendering small/medium-scale line charts (eg. time series).

image

Demo  •  Google fonts  •  V-fonts  •  Test

Usage

Put Linefont[wdth,wght].woff2 into your project directory and use this code:

<style>
@font-face {
	font-family: linefont;
	font-display: block;
	src: url(./Linefont[wdth,wght].woff2) format('woff2');
}
.linefont {
	--wght: 200;
	--wdth: 50;
	font-family: linefont;
	font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth);
	line-height: 1.4; /* match selection, optional */
}
</style>

<!-- Set values manually -->
<textarea id="linefont" class="linefont" cols="100">
abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</textarea>

<script>
// Set values programmatically (more precise)
linefont.textContent = Array.from({length: 127}, (_,i) => String.fromCharCode(0x100 + i)).join('')
</script>

Ranges

Linefont values span from 0 to 100, assigned to different characters:

  • 0-9 chars for simplified manual input with step 10 (height = number×10).
  • a-zA-Z for manual input with step 2, softened at edges a and Z (height = number of letter).
  • U+0100-017F for 0-127 values with step 1 (extra 27 values).

Variable Axes

Tag Range Meaning
wght 1-1000 Line thickness (quarter upms, linear).
wdth 25-200 Width of the font (ie. zoom of the signal).

Features

  • Ranges, values and weight is compatible with wavefont, so fonts can be swapped at wdth=100, preserving visual coherency.
  • Visible charcodes fall under marking characters unicode category, ie. recognized as word by regexp and can be selected with Ctrl + → or double click. Eg. segments separated by or - are selectable by double click.
  • Characters outside of visible ranges (but within Core Latin) are clipped to 0, eg. , \t etc.
  • Caret span is -20..120, so line-height = 1.4 is minimal non-overlapping selection.

npm package

Linefont npm package contains the font and a js function that produces font string from values.

import lf from 'linefont'

// get characters for values from 0..127 range
lf(0, 1, 50, 99, 127, ...) // ĀāIJţŤ...

Building

make build

Troubleshooting

  • The font requires ligatures (rlig) enabled for it to be properly rendered. Some environments (eg. MS Word) may not have it enabled by default, in this case enable "All Ligatures" in advance font parameters.

See also

  • wavefont − font-face for rendering waveforms.

🕉