latin: edgewrite svg row

[sheet.git] / writing-latn.inc.pl

diff --git a/writing-latn.inc.pl b/writing-latn.inc.pl
index f0a3e401de8659229282ec5c1c62e6c0ba5769c3..640dd9bd32c75d2ea5d0043b513779ea92dfbbd5 100644 (file)
--- a/writing-latn.inc.pl
+++ b/writing-latn.inc.pl
@@ -5,6 +5,18 @@ use List::Util qw( pairs pairmap sum );
 my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
 my $U = 0;  # optional unicode alternatives
 
+my @wrapstyle = (
+       'td { white-space: normal; word-spacing: 5em }', # force line break between words
+       '.sample { word-spacing: 0 }',
+       '.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
+);
+my $spacestyle = '.sample span { margin-right: 0.5ex }';  # separate multiple letters
+my @tapstyle = (
+       @wrapstyle,
+       '{ line-height: 1ex }',
+       '.sample { font-size: 80% }',
+);
+
 sub disptap {
        my $code = shift;
        my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
@@ -37,6 +49,22 @@ sub dispbar {
        );
 }
 
+sub disphues {
+       my ($index, $hues, $opaque) = @_;
+       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 22 22">%s</svg>',
+               join '', map {
+                       my $colf = $lumf[ $lum[$_] ];
+                       !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
+                               10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
+                       );
+               } 0 .. 2
+       );
+}
+
 (
 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 }],
@@ -46,10 +74,21 @@ lowercase => {
 },
 suetterlin => {
        title => 'Sütterlin',
+       style => [
+               '@font-face {
+                       font-family: Suetterlin; /* R. G. Arens */
+                       src: url("/suetterlin.ttf");
+               }',
+               'td { font-family: Suetterlin }',
+       ],
        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 => {
        title => 'Old Roman Cursive',
+       style => [
+               'svg path { stroke-linecap: round; stroke-linejoin: round }',
+               '.sample span { margin-right: -10px }',
+       ],
        list => [
                map {
                        !m/^(-?)(\w.+)/ ? $_ :
@@ -85,6 +124,7 @@ roman => {
 },
 sutton => {
        title => '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{
@@ -99,6 +139,7 @@ sutton => {
 },
 unistrokes => {
        title => 'Unistrokes',
+       style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
        list => [
                map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
                map {
@@ -134,11 +175,29 @@ unistrokes => {
                'M3,4',
        ],
 },
+edgewrite => {
+       title => 'EdgeWrite',
+       style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+       list => [
+               map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
+               map {
+                       my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } split //; # x,y,
+                       sprintf('<circle cx="%s" cy="%s" r="1"/>', @coords[0, 1]) . # start point
+                       sprintf('<path d="M%s"/>', "@coords")
+               }
+               # corners (0..3) clockwise from top-left in order
+               qw(
+                       213 0232 1023 1323 01023 102 10132 0213 02 132 02123 023 20313 2031
+                       10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123  01
+               )
+       ],
+},
 #graffiti => {
 #      title => 'Palm Graffiti',
 #},
 ita2 => {
        title => '<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
@@ -167,6 +226,7 @@ tactile => {
        ],
 },
 morse => {
+       style => $spacestyle,
        list => [map {tr/.-/‧‑/r} qw{
                .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
                -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
@@ -174,6 +234,7 @@ morse => {
 },
 tap => {
        title => '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
@@ -181,12 +242,14 @@ tap => {
 },
 shorttap => {
        title => 'Short Tap',
+       style => \@tapstyle,
        list => [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
        }],
 },
 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
@@ -194,6 +257,7 @@ cards => {
 },
 maritime => {
        title => '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>' }
@@ -417,6 +481,30 @@ rm4scc => {
                '', 1, 3  # start/end
        ],
 },
+rgbmap => {
+       title => 'RGBmap',
+       style => [
+               'svg { isolation: isolate }',
+               'svg circle { mix-blend-mode: screen }',
+               '.sample { background: black }',
+       ],
+       list => [
+               map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+               0 .. 3*3*3 - 1
+       ],
+},
+cmymap => {
+       title => '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
+               0 .. 3*3*3 - 1
+       ],
+},
 dni => {
        title => "D'ni",
        list => [
@@ -444,6 +532,10 @@ dni => {
        ],
 },
 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>)
@@ -468,6 +560,14 @@ pigpen => {
        ],
 },
 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