Formatted in tabular form

1 files changed, 137 insertions, 129 deletions

diff --git a/spec.md b/spec.md
index 9cd0fc5..3b24813 100644
--- a/spec.md
+++ b/spec.md
@@ -1,35 +1,35 @@
-## Svgbob specification
-
+## Svgbob specification 
 
 
 Svgbob is a diagramming model which uses common typing characters to approximate the shape
 
-Characters:
-    -  dash for horizontal lines
-    _ underscore for horizontal lines
-    |  or symbol for vertical lines
-    /  forward slash for lines slanted to the right
-    \  backslash for lines slanted to the left
-    +  plus for sharp intersection
-    .  dot for rounded corner intersection
-    ,  comma for rounded corner intersection
-    '  single quote for rounded corner intersection
-    `  backtick for rounded corner intersection
-    (  open parenthesis rounded side of an arc
-    )  close parenthesis rounded side of an arc
-    [  open braces rectangular corner
-    ]  close braces rectangular corner
-    *  asterisk for emphasized intersection
-    o  lowercase letter `o` for intersection
-    O  uppercase letter `O` for intersection
-    ^  caret for arrow up
-    v  lowercase letter `v` for arrow down
-    V  lowercase letter `V` for arrow down
-    <  lesser than for arrow left
-    >  greater than for arrow right
-    =  equal sign double horizontal line
-    x  lower case letter `x` for intersection
-    X  upper case letter `X` for intersection
+|characters| names                | description              
+|----------|----------------------|------------
+|   `-`    | dash, hypen, minus   | for horizontal lines
+|   `_`    | underscore           | for horizontal lines
+|   `\|`     | pipe, or             | for vertical lines
+|   `/`    | forward slash        | for lines slanted to the right
+|   `\\`   | backslash            | for lines slanted to the left
+|   `+`    | plus, add, cross     | for sharp intersection
+|   `.`    | dot, period          | for rounded corner intersection
+|   `,`    | comma                | for rounded corner intersection
+|   `'`    | single quote         | for rounded corner intersection
+|  `` ` `` | backtick             | for rounded corner intersection
+|   `(`    | open parenthesis     | rounded side of an arc
+|   `)`    | close parenthesis    | rounded side of an arc
+|   `[`    | open braces          | rectangular corner
+|   `]`    | close braces         | rectangular corner
+|   `*`    | asterisk             | for emphasized intersection
+|   `o`    | lowercase letter `o` | for intersection
+|   `O`    | uppercase letter `O` | for intersection
+|   `^`    | caret                | for arrow up
+|   `v`    | lowercase letter `v` | for arrow down
+|   `V`    | lowercase letter `V` | for arrow down
+|   `<`    | lesser than          | for arrow left
+|   `>`    | greater than         | for arrow right
+|   `=`    | equal sign           | for double horizontal line
+|   `x`    | lowercase letter `x` | for intersection
+|   `X`    | uppercase letter `X` | for intersection
 
 ## Principle
 The rendered shape should closely resembles to that of the ascii
@@ -38,119 +38,127 @@ drawing / formation.
 ## Non-goals
 The goal is NOT to be able to make graphs and diagrams with less effort.
 
-## Measurements
+## Default sizes
 Text height is 2 times the text width, both should be a multiple of 4.
-Default values:
-    - text width = 8px;
-    - text height = 16px;
 
-## Horizontal line
-    Dash line `-` will be rendered as horizontal line along the
-    middle of the character block.
-    if alone it will be rendered as text
-    2 or more next to left or right will be rendered as line
+Default values:
+- text width = 8px;
+- text height = 16px;
 
-    Example 1:
-     --   <line x1="0" y1="4" x2="16" y2="4"/>
+-------------------
+## Horizontal line `-`
+- if next to an alphanumeric character it will be rendered as text.
+- if next to another drawing character, it will be rendered as a line.
+- if alone it will be rendered as a line.
 
-    Example 2:
-     ----   <line x1="0" y1="4" x2="32" y2="4">
+ **Example 1:**
 
-    Alone
-    Example 3:
-     -  <text>-</text>
-    
-    Used together with text
-    Example:
-     opt-in <text>opt-in</text>
+|text  | svg                                   |rendered      
+|------|---------------------------------------|--------------
+|`-`   |`<line x1="0" y1="8" x2="8" y2="8"/>`  |<svg width="16" height="8"><line x1="0" y1="8" x2="8" y2="8"/></svg>
+|`--`  |`<line x1="0" y1="8" x2="16" y2="8"/>` |<svg width="16" height="16"><line x1="0" y1="8" x2="16" y2="8"/></svg>
+|`----`|`<line x1="0" y1="8" x2="32" y2="8"/>` |<svg width="32" height="16"><line x1="0" y1="8" x2="32" y2="8"/></svg>
 
-##  Underscore 
-    `_` will be rendered as lines, rendered as text when
-        alone or used together with texts
+**Example 3:** Next to an alphanumeric character
 
-    Example 1:
-      __   <line x1 y1 x2 y2></line>
+|text  |svg                           |rendered
+|------|------------------------------|-------
+|`1-`  |`<text x="2" y="12">1-</text>`|<svg width="32" height="16"><text x="2" y="12">1-</text></svg>
+|`-a`  |`<text x="2" y="12">-a</text>`|<svg width="32" height="16"><text x="2" y="12">-a</text></svg>
+    
+**Example 4:** Used together with text
 
-    Example 2:
+|text       |svg                                  |rendered
+|-----------|-------------------------------------|----------
+|`opt-in`   |`<text x="2" y="12">opt-in</text>`   |<svg width="48" height="16"><text x="2" y="12">opt-in</text></svg>
+|`chat-room`|`<text x="2" y="12">chat-room</text>`|<svg width="144" height="16"><text x="2" y="12">chat-room</text></svg>
 
-      foo_bar   <text>foo_bar</text>
+---------------------
+## Vertical line  `|`
+- if next to an alphanumeric character it will be rendered as text.
+- if next to another drawing character it will be rendered as vertical line.
+- if alone it will be rendered as vertical line
 
-## Vertical line
-   Or symbol `|` will be rendered as text when alone
+**Example 1:**
 
-    Example 1:
-        |    <line x1 y1 x2 y2></line>
-        |
+```
+|
+|
+```
+|text              | svg                         | rendered     
+|------------------|-----------------------------|----------------
+|`\|`<br>`\|`  |`<line x1="4" y1="0" x2="4" y2="32"></line>` |<svg width="8" height="32"><line x1="4" y1="0" x2="4" y2="32"></line></svg> |
 
     use as or expression
     Example 2: 
-        a||b <text>a||b</text>
-
-
-## Forward slash
-  `/` will be rendered as text when alone
-  Will be rendered as text if used together with text
+        a||b   <text>a||b</text>
+
+------------------
+## Forward slash  `/`
+- if next to an alphanumeric character it will be rendered as text.
+- if at least one if its 8 neighbors: (top,bottom,left,right, topleft, topright, bottomleft, bottomright)
+  is a drawing character then it will be rendered as a slanted line to the right
+- if used as text but next to a drawing element at the same time, rendering to drawing
+  element takes precedence.
     
-    Example 1:
-         /    <line x1 y1 x2 y2></line>
-        /
-
-    Example 2:
-        folder/   <text>folder/</text>
-        /usr/bin  <text>/usr/bin</text>
-
-## Backward slash 
-  `\` will be rendered as text when alone.
-  Will be rendered as text if used together with text
-  Will be rendered as line when it connects to other
-  drawing characters
-
-    Example 1:
-        \     <line x1 y1 x2 y2></line>
-         \
-    Example 2:
-        C:\\users    <text>C:\\users</text>
-
-## Rounded corners
-
-    .-
-    |   rounded corner on the top left
-
-    -.
-     |  rounded corner on the top right
-
-    |   |  rounded corner on the bottom left
-    `-  '-
-
-     |  rounded corner on the bottom right
-    -'
-
-## Circles
-    o - will be rendered as circle only when connected to lines
-        the radius is 1/2 of the text width
-    O - will be rendered as circle only when connected to lines
-        the radius is 3/4 of the text width
-    .-.   
-   (   )  - will be rendered as circle with a radius equal to the text height 
-    `-'   
-
-## Arrows
-    <- arrow left
-    -> arrow right
-    ^  arrow up
-    |
-
-    |  arrow down
-    v
-
-    ^
-     \  arrow to top left
-
-     ^
-    /   arrow to top right
-
-     /  
-    v   arrow to bottom left
-  
-    \
-     v  arrow to bottom right
+**Example 1:**
+```
+ /
+/
+```
+
+|text    | svg    | rendered
+|--------|--------|---------------
+|&nbsp;`/`<br>`/`|`<line x1="0" y1="16" x2="16" y2="32"></line>`|<svg width="16" height="32"><line x1="0" y1="32" x2="16" y2="0"></line></svg>
+   
+
+**Example 2:**
+
+|text | svg | rendered
+|-----|-----|-----------
+|`folder/`    |`<text x="2" y="12">folder/</text>`|<svg width="56" height="16"><text x="2" y="12">folder/</text></svg>
+|`/usr/bin`   |`<text x="2" y="12">/usr/bin</text>`|<svg width="72" height="16"><text x="2" y="12">/usr/bin</text></svg>
+
+**Example 3:** Aligned next to a drawing element
+
+|text | svg | rendered
+|-----|-----|-----------
+|`folder/`<br>&nbsp;&nbsp;`/usr/bin`|`<line x1="40" y1="32" x2="56" y2="0"/>`<br>`<text x="2" y="12">folder</text>`<br>`<text x="10" y="28">/usr</text>`<br>`<text x="58" y="28">bin</text>`|<svg width="100" height="32"><line x1="40" y1="32" x2="56" y2="0"/><text x="2" y="12">folder</text><text x="10" y="28">/usr</text><text x="58" y="28">bin</text></svg>
+
+--------------------
+## Backward slash `\`
+- if next to an alphanumeric character, then it will be rendered as text
+- if connects to a drawing element, then it will be rendered as a slanted line to the left
+- if alone then it will be rendered as slanted line to the left
+
+**Example 1:**
+```
+ \
+  \
+```
+
+|text    | svg     | rendered
+|--------|---------|---------------
+|`\\`<br>&nbsp;`\\`|`<line x1="0" y1="0" x2="16" y2="32"/>`|<svg width="16" height="32"><line x1="0" y1="0" x2="16" y2="32"/></svg>
+
+**Example 2:**
+
+|text     | svg | rendered
+|---------|-----|-----------
+|`C:\\users`|`<text x="2" y="12">C:\\users</text>`|<svg width="72" height="16"><text x="2" y="12">C:\\users</text></svg>
+
+## Cross  `+`
+- If the left side is horizontal, then this will become a horizontal line connecting midway to the left
+- If the right side is horizontal, then this will come a horizontal line connecting midway to the right
+- If top of this character is a vertical line, then this will become a vertical line connecting midway to the the top
+- If bottom of this is a vertical line, then this will become a vertical line connecting miday to bottom
+
+**Example 1:**
+
+|text | svg | rendered
+|-----|-----|----------
+|`-+` |`<line x1="0" y1="4" x2="12" y2="4"/>`|<svg width="32" height="8"><line x1="0" y1="4" x2="12" y2="4"/></svg>
+|`+-` |`<line x1="4" y1="4" x2="16" y2="4"/>`|<svg width="32" height="8"><line x1="4" y1="4" x2="16" y2="4"/></svg>
+|`\|`<br>`+`   |`<line x1="4" y1="0" x2="4" y2="24"/>`|<svg width="8" height="32"><line x1="4" y1="0" x2="4" y2="24"/></svg>
+|`+`<br>`\|`   |`<line x1="4" y1="8" x2="4" y2="32"/>`|<svg width="8" height="32"><line x1="4" y1="8" x2="4" y2="32"/></svg>
+