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

[Valerie Sutton]

SignWriting List
March 2, 2016

Thank you, Steve, for posting this new development!

...and thanks for your feedback, Jonathan...

This is good news for SignWriting users -

Val ;-)

-----



> On Mar 2, 2016, at 1:21 PM, Jonathan Duncan <duncanjonathan at YAHOO.CA> wrote:
> 
> Hi Steve,    
>     I'm really impressed!!!!  Thanks for sharing this with everybody.  It will be useful for many programmers.
> All that reflowing and no Javascript to calculate where each sign goes, just let the browser figure the layout once they are in the web page.  
> 
> Maybe latter you can share the algorithm to calculate margin-right and border-left values for any given sign.
> 
> On Chrome Version 48.0.2564.116 m it worked fine.  But on another older browser chrome Version 47.0.2526.106 it didn't work.  But I don't think it's directly related to you the sign layout, because even the signs themselves are messed up.  I was expecting the sign to be right and just in wrong  positions.  The good thing is that it isn't that hard to upgrade to the latest version of browsers.
> 
> 
> 
> Jonathan
> 
> On 3/2/2016 12:22 PM, Stephen E Slevinski Jr wrote:
>> 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 <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 <mailto:sutton at signwriting.org>
>> Post Messages to the SignWriting List: sw-l at listserv.valenciacollege.edu <mailto:sw-l at listserv.valenciacollege.edu>
>> SignWriting List Archives & Home Page http://www.signwriting.org/forums/swlist <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 <http://listserv.valenciacollege.edu/cgi-bin/wa?SUBED1=SW-L&A=1>
> -- 
> 
> email: duncanjonathan at yahoo.ca <mailto:duncanjonathan at yahoo.ca>
>          joyoduncan at gmail.com <mailto:joyoduncan at gmail.com>
> Cel Canada : (418)714-0684
> Tel USA: (347)875-8442 
> Skype: yojoduncan
> 
> http://www.immunotec.com/EnergyHealth <http://www.immunotec.com/EnergyHealth>SignWriter Studio <http://www.signwriterstudio.com/>________________________________________________
> 
> 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
> 


________________________________________________


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/be04aed0/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: hiehicch.png
Type: image/png
Size: 229307 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20160302/be04aed0/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Mail Attachment.png
Type: image/png
Size: 40341 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20160302/be04aed0/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: giedhibc.png
Type: image/png
Size: 1136 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20160302/be04aed0/attachment-0002.png>