Source of writing-latn.inc.pl

use 5.014;
use utf8;
use warnings;
use List::Util qw( pairs pairmap sum min max );

my %C = (
	red    => '#EC1C24',
	blue   => '#3953A3',
	yellow => '#F9EC31',
	black  => '#231F20',
);
my $U = 0;  # optional unicode alternatives

my @wrapstyle = (
	'td { white-space: normal; word-spacing: 10em }',
		# force line break between words
	'.sample { word-spacing: 0 }',
	'.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
		# larger space between letters
);
my $spacestyle = '.sample svg { margin-right: 0.5ex }';  # separate letters
my @tapstyle = (
	@wrapstyle,
	'{ line-height: 1ex }',
	'td:not(.sample) { vertical-align: top }',
	'.sample { font-size: 80% }',
);

my @hueorder = (
	2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
	1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
);

# Order to put similar sounds close to each other:
#	  ┌ R Y G C B M X
#	 ┌┼──────────────
#	 W│ o e y h s f -
#	  │muaixqgkdtbp l
#	 K│ w n j c z v r

my @hueletters = ((26) x 27);
@hueletters[map { ord($_) - ord('a') } qw(
	u a i x q g k d t b p m l   w n j c z v r   o e y h s f
)] = @hueorder;

sub disptap {
	my $code = shift;
	my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
	if ($U) {
		# unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
		return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
	}
	return $prefix . join(' ', map { '·' x $_ } @dots);
}

sub dispdomino {
	my $code = shift;
	my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
	# unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
	return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
}

sub dispdash {
	my $code = shift;
	my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
	my ($w, $h) = (max(6, 4 * max(@dots)), 9);
	my ($w0, $w1) = ($w / $dots[0], $dots[1] ? $w / $dots[1] : 1);
	return sprintf(
		'<svg height="20"%s viewBox="-.5 -.5 %s %s">'
		. '<path d="%s" /></svg>',
		$prefix && ' style="opacity:.5"',
		$w + 1, $h + 1, join(' ',
			"m0,$h l+$w0,-$h" x $dots[0], # slashes
			"m0,$h l-$w1,-$h" x $dots[1], # backslashes
		)
	);
}

sub dispblock {
	my $code = shift;
	my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
		or return $code;
	my %path = (
		S => 'm0,1h1v-1h1',
		Z => 'm0,0h1v1h1',
		L => 'm0,0v2h1',
		v => 'm0,0v1h1',
		J => 'm1,0v2h-1',
		T => 'm0,0h2.5h-1.5v1',
		O => 'm0,0h1v1h-1',
		I => 'm0,1h3',
		i => 'm0,1h2',
		o => 'm0,1h1',
	);
	my %col = (
		S => 120, Z => 0, J => 240, L => 30, T => 300, O => 60, I => 180,
		v => '45,50%', i => '165,50%', o => '165,0%',
	);
	s/\z(?<!%)/,100%/ for values %col;
	my @gaps = (grep $_,
		$code =~ /[Ii]$|T[23]|L3?$|S1|Z$|J1|v3?$/ ? 'gapl1' : (),
		$code =~ /T$|L2|Z$/ ? 'gapr1' : (),
	);
	return sprintf(
		'<svg height="24" viewBox="-.5 -.5 %s 4"%s>'
		. '<path d="%s" stroke="%s" fill="none"%s /></svg>',
		$code eq 'I' ? 4 : $code =~ /T3|[LJO]$|[Iio]1/ ? 2 : 3,
		@gaps ? qq( class="@gaps") : '',
		$path{$shape}, "hsl($col{$shape},50%)", join('',
			$rotate && sprintf(' transform="rotate(%s 1 1)"', $rotate * 90),
			$prefix && ' style="opacity:.5"',
		),
	);
}

sub dispbar {
	my $code = shift or return '';

	return join '', pairmap {
		($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/  /dr)
	} split //, $code if $U;

	my @cols = split //, $code;  # bar and space widths
	my $width = sum(@cols);
	return sprintf(
		'<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
		$width * 2, 14, $width, 7, join(' ',
			'M0,0',
			map {
				join('m1,-7', ('v7') x $_->[0]),  # line per bar width
				(map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()),  # space forward
			}
			pairs @cols
		)
	);
}

sub disphues {
	my ($index, $hues, $opaque) = @_;
	$index >= 0 or $index = 26;
	my @lum = ($index % 3, $index / 3 % 3, $index / 9);  # hue opacities (0..2)x3
	my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
		('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
	return sprintf(
		'<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
		join '', map {
			my $colf = $lumf[ $lum[$_] ];
			!$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
				5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
			);
		} 0 .. 2
	);
}

+{
default => [qw( written sign digital touch tactile sound games semaphore barcode personal )],
written => [qw( uppercase lowercase suetterlin roman )],
digital => [qw( stroke ita2 )],
stroke => [qw( graffiti unistrokes edgewrite )],
touch => [qw( moon braille )],
sign => ['sutton'],
sound => [qw( morse tap shorttap )],
games => [qw( domino tetromino cards )],
semaphore => [qw( maritime flag chappe prussian )],
barcode => [qw( rm4scc code39 code93 code128 )],
personal => [qw( rgbmap cmymap dni pigpen nyctographs chromacons )],

order => {
	name => '#',
	list => [1 .. 26],
},
uppercase => {
	list => [qw{ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z }],
},
lowercase => {
	list => [qw{ a b c d e f g h i j k l m n o p q r s t u v w x y z }],
},
suetterlin => {
	name => 'Sütterlin',
	style => [
		'@font-face {
			font-family: Suetterlin; /* R. G. Arens */
			src: url("/suetterlin.ttf");
		}',
		'td { font-family: Suetterlin }',
		'td:hover::first-letter { text-transform: uppercase }',
	],
	list => [qw{ a b c d e f g h i j k l m n o p q r ſ s t u v w x y z }],
},
roman => {
	name => 'Old Roman Cursive',
	style => [
		'svg path { stroke-linecap: round; stroke-linejoin: round }',
		'.sample svg { margin-right: -10px }',
	],
	list => [
		map {
			s{\A-?\K(\w.+)}
			 {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
		}
		"m2,4 c1,2 8,9 8,9 M2,15 6,9",
		"m2,4 c0,0 3,-2 4,1 1,2 0,9 3,9 1,-0 2,-1 2,-1 m-6,-2 c-5,4 -0,6 1,3",
		"m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
		"m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
		"m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
		"m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
		"m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
		"m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
		'>', # i = j
		"m6,8 -0,7",
		"-m9,5 -5,4 4,4 m-4,-10 -1,13",
		"m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
		"m0,16 3,-10 4,6 2,-5 5,4",
		"m2,16 1,-9 5,8 2,-9",
		"m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
		"m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
		"m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
		"m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
		"m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
		"m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
		'>', # u = v
		"m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
		'-',
		"m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
		"-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
		"-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
	],
},
sutton => {
	name => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
	style => $spacestyle,
	list => [
		# American manual alphabet in Sutton (U+1D800+) notation
		map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
		8F7a9c    847a9c    86Da9c    801a9c    84Aa9c
		8CEa9c    8F0       815aa2    892a9c    892a9c9A2aac
		840a9c    8DCa9c    88Da9c
		819a9c    876a9c    840a9caA1 8F0a9caA1 81Aa9c
		903a9c    8FBa9c    815a9c    80Ea9c    887a9c
		806a9c    89Aa9c    800a9c945aaa
		0         965aa6
	}],
},
graffiti => {
	name => 'Palm Graffiti',
	style => [
		'@font-face {
			font-family: Graffiti;
			src: url("/graffiti.ttf");
		}',
		'td { font-family: Graffiti }',
	],
	list => [qw{ a b c d e f g h i j k l m n o p q r s t u v w * y z }],
},
unistrokes => {
	name => 'Unistrokes',
	url   => 'https://www.google.com/patents/US5596656', # by Xerox
	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
	list => [
		map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
		map {
			my ($x, $y, $next) = m/\AM(\d+),(\d+)(.)?/;
			sprintf('<circle cx="%s" cy="%s" r="1"/>', $x, $y) . # start point
			(defined $next && qq(<path d="$_"/>))
		}
		'M3,8 V0',
		'M0,0 6,4 0,8',
		'M6,0 0,4 6,8',
		'M6,0 0,4 6,8',
		'M6,4 H0',
		'M6,0 0,0 0,8',
		'M0,8 6,8 6,0',
		'M0,0 6,0 6,8',
		'M3,0 V8',
		'M6,0 6,8 0,8',
		'M0,8 6,0',
		'M0,0 0,8 6,8',
		'M6,8 3,0 0,8',
		'M0,8 3,0 6,8',
		'M6,0 Q0,6 3,8 6,6 0,0',
		'M0,0 Q4,8 6,4 4,0 0,8',
		'M6,0 Q2,8 0,4 2,0 6,8',
		'M0,0 6,8',
		'M6,0 0,0 6,8 0,8',
		'M0,4 H6',
		'M6,0 3,8 0,0',
		'M0,0 3,8 6,0',
		'M0,0 0,8 6,0 6,8',
		'M0,0 Q6,6 3,8 0,6 6,0',
		'M6,0 0,8',
		'M0,0 6,0 0,8 6,8',
		'M3,4',
	],
},
edgewrite => {
	name => 'EdgeWrite',
	url   => 'http://depts.washington.edu/ewrite/', # patented US7729542
	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
	list => [
		map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
		map {
			my @route = split //;
			my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
			sprintf('<circle cx="%s" cy="%s" r="1"/><path d="M%s"/>',
				@coords[0, 1],  # start point
				join(' ', map {
					my $pos = join(',', @coords[$_*2, $_*2 + 1]);
					$_ > 1 && $route[$_] == $route[$_ - 2] # curve back
						? 'Q4,4 '.$pos.'L' : $pos
				} 0 .. $#route),
			)
		}
		# corners (0..3) clockwise from top-left in order
		qw(
			213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
			10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123  01
		)
	],
},
ita2 => {
	name => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
	style => [@wrapstyle, 'td { font-size: 50% }'],
	list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
		11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
		00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
		00100
	)],
},
moon => {
	list => [
		map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
		'M0,6 3,0 6,6',
		'M1,0 V4 A2,2 0,0,0 5,4',
		'M5,0 A4.5,3 0,0,0 5,6',
		'M1,0 A4.5,3 0,0,1 1,6',
		'M0,6 V0 H6',
		'M1,6 V2 A2,2 0,0,1 5,2',
		'M5,6 V2 A2,2 0,1,0 1,2',
		'M1.5,3 A1.5,1.5 0,0,0 4.5,3 1.5,1.5 0,0,0 1.5,3 M3,1.5 A1,1.5 0,0,0 3,4.5',
		'M3,0 V6',
		'M5,0 V4 A2,2 0,0,1 1,4',
		'M6,0 0,3 6,6',
		'M0,0 V6 H6',
		'M0,0 H6 V6',
		'M0,6 V2 L6,6 V0',
		'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
		'M6,4 H2 A2,1 0,0,1 2,2',
		'M0,4 H4 A2,1 0,0,0 4,2',
		'M0,0 6,6',
		'M0,6 6,0',
		'M0,3 H6',
		'M0,0 V3 A3,3 0,0,0 6,3 V0',
		'M0,0 3,6 6,0',
		'M0,6 V3 A3,3 0,0,1 6,3 V6',
		'M0,0 6,3 0,6',
		'M6,0 V6 H0',
		'M0,0 H6 L2,6 H6',
	],
	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
},
braille => {
	list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
},
tactile => {
	name => '5-point Tactile',
	list => [
		map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
		map {
			join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
				!$_ ?  9 : $_ & 1 ? 4 : 14,
				!$_ ? 12 : $_ < 3 ? 4 : 20,
			} split //
		}
		qw{
			4 234 012 14 0 014 023 12
			02 024 0134 23 013 03 01 123
			0124 13 04 1 34 0123 134 0234
			034 124
		}
	],
},
morse => {
	style => $spacestyle,
	list => [map {tr/.-/‧‑/r} qw{
		.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
		-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
	}],
},
tap => {
	name => 'Tap code',
	style => \@tapstyle,
	list => [map { disptap($_) } qw{
		11 12 13 14 15 21 22 23  > 24 25 31 32
		33 34 35 41 42 43 44 45 51 52 53 54 55
	}],
},
shorttap => {
	name => 'Short Tap',
	style => \@tapstyle,
	altlist => [map { disptap($_) } qw{
		11 12 13 14 21 22 23 20 > 31 -13 32 33
		30 41 42 -13 43 40 10 51 52 53 50 -31 -40
	}],
	list => [map { dispdash($_) } qw{
		10 14 -24 12 20 23 22 21 30 -34 13 33 32
		31 40 43 -13 42 41 11 50 -53 -44 -52 -51 -54
	}],
},
domino => {
	name => 'Domino tiles',
	style => [
		# enlarge single tile height to span full vertical combinations
		'td { font-size: 200%; line-height: .6; padding: 0 0 .3ex }',
	],
	list => [map { dispdomino($_) } qw{
		10 11 20 21 22 30 31 32 33 40 41 42 43
		44 50 51 52 53 54 55 60 61 62 63 64 65
	}],
},
tetromino => {
	style => [
		'svg path { stroke-linecap: square }',
		'.sample .gapl1 + .gapr1 { margin-left: -6.3px }',
	],
	name => 'Tetrominos',
	list => [map { dispblock($_) } qw{
		T2 T1 I  T3
		i  L1 J  L3
		o1 I1 L2 L  -S1 Z1
		O  J2 v2 -J3 S  T
		J1 v1 v  v3 i1 Z
	}],
},
cards => {
	style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
	list => [(
		map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
		1 .. 11, 13, 14  # A 2-10 J Q K
	), '', chr(0x1F0CF), chr(0x1F0DF) ],
},
maritime => {
	name => 'Maritime flags',
	style => $spacestyle,
	list => [
		# International Code of Signals, SVG fills
		map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
		split /\n\n/, qq{
			<path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
			<path fill="white" d="M0,0 h15 v30 h-15"/>

			<path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M0,6  h30 v18 h-30" />
			<path fill="$C{red}" d="M0,12 h30 v6  h-30" />

			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>

			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
			<path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
			<path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>

			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M0,0 h15 v30 h-15"/>

			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
			<circle fill="$C{black}" r="7.5" cx="15" cy="15"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M0,10 h30 v10 h-30"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>

			<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11
				M0,4v22l11,-11 M30,4v22l-11,-11"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="
				M0,0     h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
				m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
				m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
				m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
			"/>

			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{red}" d="M0,0 h30 v30"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M10,10 h10 v10 h-10"/>

			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>

			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
			<path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
			<path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>

			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11
				M0,4v22l11,-11 M30,4v22l-11,-11"/>

			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
			<path fill="white" d="M5,5 h20 v20 h-20"/>
			<path fill="$C{red}" d="M10,10 h10 v10 h-10"/>

			<path fill="white" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
			<path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>

			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6
				M24,0h6l-30,30v-6 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>

			<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
			<path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
			<path fill="$C{yellow}" d="M0,0  h31 l-15,15"/>
			<path fill="$C{red}" d="M0,30 h31 l-15,-15"/>



			<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
			<path fill="$C{yellow}" d="M0,9 20,15 0,21"/>

			<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
			<path fill="white" d="M15,10 30,15 15,20"/>
		},
	],
},
flag => {
	name => 'Flag semaphore',
	list => [
		map {
			local $_ = $_;
			s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
			tr/1-9/↙←↖↑↗→↘↓/;
			s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
			$_
		}
		qw(
			1 2 3 4 5  6 7 21 31 46  14 51 16 17 23
			24 25 26 27 34  35 47 56 57 36  67
		)
	],
},
chappe => {
	name => 'Chappe semaphore',
	list => [
		map {
			my ($r, $pr, $pl) = split //, $_;
			/^\D$/ ? $_ : sprintf(
				join('',
					'<svg width="16" height="20" viewBox="0 0 10 15">',
					'<path d="M5,6 v7"/>',
					'<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
					'</svg>',
				),
				['6', '3v3', '9v-3']->[$pl],
				[ '',  'v3',  'v-3']->[$pr],
				$r * 45,
			);
		}
		# 360° rotation (0-7) and position state (0-2) of left and right bars
		qw(
		  021 121 221 321 421 521 621 721
		  > 022 122 222 322 011 111 211 311
		  001 101 201 301 401 501 601 701 020
		)
	],
},
prussian => {
	name => 'Prussian semaphore',
	list => [
		map { /^\D+$/ ? $_ : sprintf
			join('',
				'<svg width="10" height="20" viewBox="0 0 8 18">',
				'<path d="M4,1 v18"/>',
				(map {(
					qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
					qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
				)} 3, 7, 14),
				'</svg>',
			),
			map { ($_ - 2) * 45 % 360 } split //, $_
		}
		# rotation state (0-3) for left and right bar of 3 rows
		qw(
			003000 000200 203300 000030 033030 000130 000330 032330 > 031330
			022020 130120 001320 233010 030210 022310 203001 233001
			131001 231301 000202 023302 230003 032003 201003 101003
		)
	],
},
code39 => {
	name => 'Code 39',
	list => [map { dispbar($_) } qw(
		2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
		1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
		2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
		1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
		2211211111 1221211111            1221112111 0 1211212111
	)], # ISO/IEC 16388
},
code93 => {
	name => 'Code 93',
	list => [map { dispbar($_) } qw(
		211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
		132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
		221121 222111 112122 112221 122121 123111        311211 0 111141
	)],
},
code128 => {
	name => 'Code 128',
	list => [map { dispbar($_) } qw(
		111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
		112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
		213131 311123 311321 331121 312113 312311      212222 0 211412 23311120
	)],
},
rm4scc => {
	name => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
	list => [
		map {
			my $len = length $_;
			!$len ? '' : sprintf(
				'<svg width="%d" height="20" viewBox="0 0 %d 6">'
				. '<path d="M1%s"/></svg>',
				$len * 5, $len * 2,
				join ' m2',
				map { sprintf ',%dv%dm0,-%d',
					($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
					($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
				}
				split //
			);
		}
		qw(
								2121 2301
			0132 0312 0330 2112 2130 2310
			1023 1203 1221 3003 3021 3201
			1032 1212 1230 3012 3030 3210
			1122 1302 1320 3102 3120 3300
			0033
		), # 0 for space
		'', 1, 3  # start/end
	],
},
rgbmap => {
	name => 'RGBmap',
	style => [
		'svg { isolation: isolate }',
		'svg circle { mix-blend-mode: screen }',
		'.sample { background: black }',
	],
	list => [
		map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
		@hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
	],
},
cmymap => {
	name => 'CMYmap',
	style => [
		'svg { isolation: isolate }',  # mix on white
		'svg circle { mix-blend-mode: multiply }',
		'.sample { background: white }',
	],
	list => [
		map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
#		@hueorder[13..18, 19, 0..11, 20..25, 12, 26],
		@hueletters
	],
},
dni => {
	name => "D'ni",
	style => [
		'svg { border: 1px solid currentColor }',
		'.sample svg + svg { border-left: 0 }',
	],
	list => [
		map {
			state $v = [
				'',
				'M0,4 8,4',
				'M0,8 Q4,4 8,8',
				'M0,4 4,8 8,4',
				'M2,0 2,4 8,4',
				'M0,0 8,8 M0,8 8,0', # cross
				'M3.5,4 h1', # dot
			];
			state $h = [
				'',
				'M4,0 4,8',
				'M0,0 Q4,4 0,8',
				'M4,-.5 0,4 4,8.5',
				'M4,8 4,2 8,2',
			];
			sprintf(
				'<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
				$h->[$_ % 5] . $v->[$_ / 5] || $v->[6],
			);
		} 0 .. 5*5
	],
},
pigpen => {
	style => [
		'svg path { stroke-linecap: square }',
		'.sample svg { margin-right: 0.1em }',
	],
	list => [
		map {
			qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
		}
		map {
			local $_ = $_;
			s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
			s/[hv]\K|X/6/g;
			s/(?:v|,[^0]).*?v\K/-/;
			s/(?:h|m[^0]).*?h\K/-/;
			m/h/ or s/v/l3,/g;
			m/v/ or s/h([^h]*)/l$1,3/g;
			my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
			qq(<path d="$_"/>$dot)
		}
		qw(
			Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
			Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
			vv  hh  Hhh  Vvv
			vv. hh. Hhh. Vvv.
		),
	],
},
nyctographs => {
	style => [
		'svg path { stroke-linecap: round; stroke-linejoin: round }',
		'.sample svg {
			background: rgba(0,0,0, .1);
			padding: 0.1em;
			margin-right: 0.2em;
		}',
	],
	list => [
		map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
		map { sprintf
			'<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
			. '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
			'h.5v.5h-.5v-.5',  # start anchor
			map { ['M', 'h0M', 'L']->[$_] }
			split //
		}
		# draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
		qw(
			0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
			0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
			0000
		),
	],
},
chromacons => {
	title => 'Colour Alphabet by Paul Green-Armytage (2010)',
	style => [
		#'.sample { word-break: break-all }',
		'.sample { background: white }',
	],
	list => [
		map {
			sprintf('<span%s>%s</span>',
				!!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
				chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
			);
		}
		qw{
			F0A3FF:Amethyst 0075DC:Blue     993F00:Caramel  4C005C:Damson
			191919:Ebony    005C31:Forest   2BCE48:Green    FFCC99:Honeydew
			808080:Iron     94FFB5:Jade     8F7C00:Khaki    9DCC00:Lime
			C20088:Mallow   003380:Navy     FFA405:Orpiment FFA8BB:Pink
			426600:Quagmire FF0010:Red      5EF1F2:Sky      00998F:Turquoise
			E0FF66:Uranium  740AFF:Violet   990000:Wine     FFFF80:Xanthin
			FFFF00:Yellow   FF5005:Zinnia   0
		}
	],
},
};

sheet.shiar.nl/source.plp version 1.4 created by Shiar • AGPLv3