<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Hi SignWriting list,<br>
<br>
Working on SignPuddle 3, I created something really cool I'd like to
share.<br>
<br>
Using standard HTML and CSS, I have improved the vertical writing
mode for SignWriting in the modern browser.<br>
<br>
<img src="cid:part1.09010001.02070905@signpuddle.net" alt=""><br>
<a class="moz-txt-link-freetext" href="http://codepen.io/Slevinski/pen/zqGNqz?editors=1100">http://codepen.io/Slevinski/pen/zqGNqz?editors=1100</a><br>
<br>
This is a combination of TrueType fonts, SVG, HTML, and CSS all
working together to create text that reflows and handles spacing
properly.<br>
<br>
One of the biggest challenges for SignWriting with computers is that
the text does not have a standard size. This creates spacing issues
that standard HTML and CSS were not designed to handle. Luckily, it
is possible to use a variety of strategies to implement SignWriting
in the browser.<br>
<br>
The above example uses a series of span elements and borders to
achieve the lane and column divisions. The line-height for each
column is adjusted automatically based on the individual signs that
appear in each column. If the page size is changes or zoomed, each
column width will adjust accordingly. For the individual signs, the
spacing is set on the left with "margin-right: {#}px" and the
spacing is set on the right with "border-left: {#}px solid
transparent".<br>
<br>
I've checked all modern browsers on Windows, Mac, and Linux and this
strategy works. Very exciting.<br>
<br>
Regards,<br>
-Steve<br>
</body>
</html>
________________________________________________
<p>
<p>
SIGNWRITING LIST INFORMATION
<p>
Valerie Sutton
SignWriting List moderator
sutton@signwriting.org
<p>
Post Messages to the SignWriting List:
sw-l@listserv.valenciacollege.edu
<p>
SignWriting List Archives & Home Page
http://www.signwriting.org/forums/swlist
<p>
Join, Leave or Change How You Receive SW List Messages
http://listserv.valenciacollege.edu/cgi-bin/wa?SUBED1=SW-L&A=1