Life In 19x19

Cool. Will make more updates in a bit.

I made a couple more updates:
* Made numbers thinner.
* Added outline around circles.
* The bug with the $$W tag should be fixed.
* Changed padding of div to have text aligned on bottom if it exists (right now diagrams have 5 pixels of space below the text if you annotate the diagram).
* Changed text color of text for two of the schemes.

Here are examples using the diagram I've been repeating all over the place: Here are some examples from the Relentless thread that died a little while ago:

[go-beta]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta]

[go-beta2]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta2]

[go-beta3]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta3]

---

I looked into making the circles "anti-aliased", but haven't had much success. From what I've read, anti-aliasing, at least using the canvas arc in javascript, depends on the browser - so some browsers might anti-alias, and some might not.

1.) Is thinner text for the stone numbers preferred, or was the old thicker text better?
2.) Any other updates on appearance to these? Are they readable?

If there is more work to do on #1 and #2, above, I'll do that first. Otherwise, I'll move on to adding coordinate functionality.

These are looking nice! I like the orange and brown boards better than the yellow one, which has less contrast.

The stone numbers (and the letters) don't seem perfectly centered. They are slightly higher up than they should be, and perhaps a touch too far left (except for the 10, which is a little too far right). I don't know what system you are using; when I had to do something similar I was able to find the bounding box of the number and place it so that its center aligned exactly with the center of the circle.

1.) Is thinner text for the stone numbers preferred, or was the old thicker text better?

looks good for me

2.) Any other updates on appearance to these? Are they readable?

I was about to write about justification of the numbers, but when the page reappeared after I “liked” your last comment, I saw that dfan already had beat me to it

Hi Kirby,

It's looking nice. I'm on Safari iOS, tiny iPhone 4S screen.

Feature request, if possible.

Current: zero gaps between rook-adjacent stones:

Click Here To Show Diagram Code

[go]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . . . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . . . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . . . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go]

Beta: gaps between rook-adjacent stones: ( also, beta bug: odd numbered stones, should be all Black ; even White )
[go-beta]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . . . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . . . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . . . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta]
Feature request, if feasible: could you make the gap exactly 1 pixel wide, regardless of the browser ?
Or, could it be a user preference ? Zero pixel, unchanged from current, zero gaps ; or 1 pixel, etc. ?
( I'm not sure which looks better, yet.
I'm pretty sure 1+ pixel gaps start to look strange...

Beta bug:

For what it's worth, I have printed books with both the small-gap style and the stones-touching style. The small-gap style appears to be a bit more popular.

Will look into the pixel thing. About the bug, not all diagram formats are implemented - initially wanted to see how people liked the look. I'll start to prioritize functionality now.

Maybe tomorrow- have an AYD game tonight.

Hi Kirby,

No hurry at all -- all this is bonus for us ! Thanks. The beta already looks much better.

What is AYD ?

Hi Kirby, dfan,

Just for reference. ( Big screenshots -- this post ; Small screenshots -- next post )
( It's understood that there are differences when we're playing -- on a big board -- versus viewing/studying, on smaller boards ).
gIGo (1-pixel ? gaps), 1024x1027: GoPanda2 (1-pixel ? gaps ; grid lines too heavy ?), Windows 8.1, 1580x1080: MultiGo (1+ pixel gaps too wide), 902x904:

Hi Kirby,

For reference, "similar"-sized diagrams ( Firefox, Windows 8.1 ):

Current: zero gaps between rook-adjacent stones:

Click Here To Show Diagram Code

[go]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . . . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . . . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . . . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go]

Beta: gaps between rook-adjacent stones: ( also, beta bug with stone colors < Fixed by post 45 > )
[go-beta]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . . . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . . . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . . . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta]
gIGo 440x441: GoPanda2 440x440: MultiGo 440x440:

I think I’d prefer it if the rook-adjacent stones would touch, i.e. if there were no gap.

Maybe this is easier to immediately recognize as solidly connected? (if of same colour, of course)

@EdLee:
AYD is American Yunguseng Dojang.

http://ayd.yunguseng.com

I like the look now, particularly the first of the four options.

Regarding the gap/no gap, I think that the gap might look good if the lines of the board seemed to continue in the gap. This may just be an extra pixel or two in each of the cardinal directions from the stone graphic, assuming it's a set of images compounded together in squares to build the board, though you would have to account for the edges of course. To not have a gap, I think you'd need much more finely rendered/anti-aliased stones, lest it lead to a sort of black block where the stones touch.

I do find that having a gap without the lines leads to this weird illusory appearance of board-coloured boxes around the stones where they are clustered tightly together.

Other opinions?

Books that have the gap in their diagrams generally just have empty space between stones, no grid lines. You may be surprised if you take a look in your library. Of course that doesn't necessarily mean that it wouldn't look fine if the grid lines were present.

For now, I narrowed the gap. I didn't do anything with anti-aliasing, so it looks a little like a blob:

[go-beta]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta]

[go-beta2]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta2]

[go-beta3]$$B
$$ +---------------------------------------+
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . O . . . . . . . . . . . . b . . |
$$ | . . . , . 0 . . . 6 . 7 . . . X . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . 2 . 3 . . . . a . . |
$$ | . . . . . 9 . . . . 4 5 . . . . . . . |
$$ | . . . 8 . . . X . O . 1 . . . . . . . |
$$ | . . X O . X . . O . . . . . . . . . . |
$$ | . . . , . X . O . , . . . . . , . c . |
$$ | . . O . . . X O X X X . X X X X X . . |
$$ | . . . O . X O O X O X . X O O O O O . |
$$ | . . . O X . O O O O X O O . . . . . . |
$$ | . . . O X . . O X X O O X O X . X . . |
$$ | . O O X X . O X X . O X X . . . . . . |
$$ | . X X O . X O X O , O O . . O , X . . |
$$ | . X O . O X X X . O . X . O . X . X . |
$$ | . X O . X O X . . . . . . . . . X O . |
$$ | . O . . O O . . . . . . . . . . . . . |
$$ +---------------------------------------+[/go-beta3]

I also adjusted the black/white sente thing. There are still unsupported diagram types (like not having the "|" border marks isn't implemented yet, as EdLee showed).

I adjusted the centering of the numbers on the stones, and changed the labels to be capitalized and a slightly different font.

I'll work on getting the diagram bugs out next probably (e.g. different board sizes, not having border marks, markings on edges that don't show up properly, etc.), then coordinates. Then I can revisit how the spacing between stones looks, anti-aliasing, etc.