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.

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.



Valerie Sutton SignWriting List moderator [log in to unmask]

Post Messages to the SignWriting List: [log in to unmask]

SignWriting List Archives & Home Page

Join, Leave or Change How You Receive SW List Messages