[Sw-l] Vertical SignWriting with borders in the browser

[Stephen E Slevinski Jr]

Hi SignWriting list,

Working on SignPuddle 3, I created something really cool I'd like to share.

Using standard HTML and CSS, I have improved the vertical writing mode 
for SignWriting in the modern browser.


http://codepen.io/Slevinski/pen/zqGNqz?editors=1100

This is a combination of TrueType fonts, SVG, HTML, and CSS all working 
together to create text that reflows and handles spacing properly.

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.

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".

I've checked all modern browsers on Windows, Mac, and Linux and this 
strategy works.  Very exciting.

Regards,
-Steve

________________________________________________


SIGNWRITING LIST INFORMATION

Valerie Sutton
SignWriting List moderator
sutton at signwriting.org

Post Messages to the SignWriting List:
sw-l at listserv.valenciacollege.edu

SignWriting List Archives & Home Page
http://www.signwriting.org/forums/swlist

Join, Leave or Change How You Receive SW List Messages
http://listserv.valenciacollege.edu/cgi-bin/wa?SUBED1=SW-L&A=1
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20160302/4338082d/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: caiafgbh.
Type: image/png
Size: 40341 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20160302/4338082d/attachment-0001.png>