Home

SegType Wiki

Comprehensive documentation for SegType — a web-based segment-display component.

Installation

npm

npm install segtype

import { defineSeg } from 'segtype';
defineSeg();

CDN (ESM)

<script type="module">
  import { defineSeg } from 'https://cdn.jsdelivr.net/npm/segtype/dist/segtype.mjs';
  defineSeg();
</script>

CDN (IIFE / Global)

<script src="https://cdn.jsdelivr.net/npm/segtype/dist/segtype.min.js"></script>
<script>
  SegType.defineSeg();
</script>

---

Quick Start

<!-- Basic 7-segment display -->
<x-seglyph value="1234"></x-seglyph>

<!-- 14-segment with theme -->
<x-seglyph value="HELLO" mode="14seg" theme="neon-green"></x-seglyph>

<!-- Custom colors -->
<x-seglyph value="CUSTOM" color="#ff0000" off-color="#330000" bg="#111"></x-seglyph>

---

API Reference

defineSeg()

Registers the <x-seglyph> custom element. Call once before using the component.

import { defineSeg } from 'segtype';
defineSeg();

Exports

Export	Type	Description
defineSeg	() => void	Registers <x-seglyph>
SegDisplay	class	The Web Component class
getSegments	(char: string, mode: string, variant?: number) => string[]	Returns active segments for a character
getCharVariants	(char: string, mode: string) => string[][]	Returns all segment variants for a character
MODES	Record<string, SegmentSet>	Segment geometry definitions
THEMES	Record<string, ThemeVars>	Built-in theme definitions
SegmentSet	interface	Type for segment mode definition
ThemeVars	interface	Type for theme definition

---

Segment Modes

Mode	Segments	Description
7seg	7 (a–g)	Standard seven-segment display
9seg	9 (a–i)	Adds two diagonal segments
14seg	14	Split middle bar + four diagonals
16seg	16	Split top/bottom + split middle + four diagonals

Set via the mode attribute:

<x-seglyph value="ABC" mode="14seg"></x-seglyph>

---

Theme System

Built-in themes (use via theme attribute):

Theme	Preview	Glow
calculator	Dark LCD	No
e-ink	E-ink style	No
lcd	Classic LCD	No
lcd-backlit	Backlit LCD	No
neon-amber	Amber neon	Yes
neon-blue	Blue neon	Yes
neon-green	Green neon	Yes
neon-red	Red neon	Yes
neon-vapor	Vaporwave	Yes

<x-seglyph value="THEME" theme="neon-blue"></x-seglyph>

Themes with glow: false (calculator, e-ink, lcd, lcd-backlit) disable glow by default. Add glow attribute to override.

Some themes also set skew: true (neon-red) to apply a default -6deg slant. Override with the skew attribute.

---

Attributes Reference

Attribute	Type	Default	Description
value	string	''	Text to display
mode	'7seg' | '9seg' | '14seg' | '16seg'	'7seg'	Segment mode
variant	integer	1	Character variant index (1-based)
theme	string	—	Built-in theme name
glow	boolean (attr)	theme default	Enable glow effect
glow-blur	number	1	Glow blur radius (px)
color	CSS color	theme on	Override segment-on color
off-color	CSS color	theme off	Override segment-off color
bg	CSS color	theme bg	Override background
height	CSS length	22px	Digit height
gap	CSS length	3px	Gap between digits
segment-gap	number (0–1)	0.15	Segment internal gap ratio
skew	number (degrees)	0	Skew angle (negative = left lean)
length	integer	0	Fixed display length (0 = auto)
pad	string (1 char)	' '	Pad character for fixed length

---

Custom Colors

Override theme colors per-instance:

<x-seglyph
  value="CUSTOM"
  color="#00ff00"
  off-color="#003300"
  bg="#000000"
></x-seglyph>

When any of color, off-color, bg are set, the theme attribute is ignored for those properties.

---

Build

npm run build

Outputs to dist/:

• segtype.mjs — ESM bundle
• segtype.js — CommonJS bundle
• segtype.min.js — IIFE (global SegType, minified)
• *.d.ts — TypeScript declarations