<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    Hi Steve,    <br>
        I'm really impressed!!!!  Thanks for sharing this with
    everybody.  It will be useful for many programmers.<br>
    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.  <br>
    <br>
    Maybe latter you can share the algorithm to calculate margin-right
    and border-left values for any given sign.<br>
    <br>
    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.<br>
    <br>
    <img src="cid:part1.09090007.08010608@yahoo.ca" alt=""><br>
    <br>
    Jonathan<br>
    <br>
    <div class="moz-cite-prefix">On 3/2/2016 12:22 PM, Stephen E
      Slevinski Jr wrote:<br>
    </div>
    <blockquote cite="mid:56D72F7A.4010406@signpuddle.net" type="cite">
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      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:part2.07060609.02030707@yahoo.ca" alt=""><br>
      <a moz-do-not-send="true" 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>
      ________________________________________________
      <p>
      </p>
      <p>
        SIGNWRITING LIST INFORMATION
      </p>
      <p>
        Valerie Sutton
        SignWriting List moderator
        <a class="moz-txt-link-abbreviated" href="mailto:sutton@signwriting.org">sutton@signwriting.org</a>
      </p>
      <p>
        Post Messages to the SignWriting List:
        <a class="moz-txt-link-abbreviated" href="mailto:sw-l@listserv.valenciacollege.edu">sw-l@listserv.valenciacollege.edu</a>
      </p>
      <p>
        SignWriting List Archives & Home Page
        <a class="moz-txt-link-freetext" href="http://www.signwriting.org/forums/swlist">http://www.signwriting.org/forums/swlist</a>
      </p>
      <p>
        Join, Leave or Change How You Receive SW List Messages
<a class="moz-txt-link-freetext" href="http://listserv.valenciacollege.edu/cgi-bin/wa?SUBED1=SW-L&A=1">http://listserv.valenciacollege.edu/cgi-bin/wa?SUBED1=SW-L&A=1</a>
      </p>
    </blockquote>
    <br>
    <div class="moz-signature">-- <br>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title></title>
      <div class="moz-signature">
        <div> <img src="cid:part4.00050804.06090603@yahoo.ca" alt="">
          <p>email: <a href="mailto:duncanjonathan@yahoo.ca">duncanjonathan@yahoo.ca</a><br>
                     <a href="mailto:joyoduncan@gmail.com">joyoduncan@gmail.com</a><br>
            Cel Canada : (418)714-0684<br>
            Tel USA: (347)875-8442 <br>
            Skype: yojoduncan<br>
            <br>
            <a href="http://www.immunotec.com/EnergyHealth">http://www.immunotec.com/EnergyHealth</a></p>
          <a href="http://www.signwriterstudio.com/">SignWriter Studio</a>
        </div>
      </div>
    </div>
  </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