Diagram Captions Should Be Fixed

KGS 4 kyu · Post by **fwiffo** » Wed Jun 02, 2010 7:28 am

I've added this to the todo list.

HermanHiddema · Post by **HermanHiddema** » Tue Jan 25, 2011 12:34 pm

Its been six months :grumpy:

This is really annoying me every time I post something with diagrams.

Also, its broken because of the bbcode/html parsing anyway (See John Fairbairn's post about Boundary Plays for an example).

Can we please please get this fixed? :roll:

HermanHiddema · Post by **HermanHiddema** » Wed Feb 02, 2011 3:20 am

Please! This cannot be hard.

The sltxt2png script does not normally put text into the image like this, so this really can't be much more than just putting back the original sltxt2png and putting the header text in the body of the post...

Post by **Jordus** » Wed Feb 02, 2011 3:17 pm

So I fixed that particular example you gave in john fairburns thread of boundary plays.

I am guessing the issue we are having with the diagrams is that certain characters are not parsed correctly causing the title to enter the image? In the post you gave as an example it was parentheses. Is this the issue?

topazg · Post by **topazg** » Wed Feb 02, 2011 3:25 pm

Some characters are parsing badly

Click Here To Show Diagram Code: [go]$$Wcm30 ()&*£ $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . O . . . . . , . . . . . , . . . | $$ | . . . . . . . . . . . . . . . X . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ | . . . . . . . . . . . . . . . . . . . | $$ ---------------------------------------[/go]

Post by **Jordus** » Wed Feb 02, 2011 3:29 pm

topazg wrote:Some characters are parsing badly

so the parsing of these characters is the issue? that is what I am trying to determine so I can possibly look into it.

topazg · Post by **topazg** » Wed Feb 02, 2011 3:30 pm

I don't know, it isn't my issue, but I know it was a complaint above and it's still the case.

Kirby · Post by **Kirby** » Wed Feb 02, 2011 4:41 pm

Hey Jordus,
I don't have time to fix this right now, but I know what the issue is. I modified the included php file for the diagrams to display the caption text as part of the image. This was easy to do at the time since we just construct the image from the url.

I also made word wrapping code which isn't completely bug-free. It's all in the php file, though, so if you want to take a look at the issue, it's within the php where the image is constructed for a diagram.

Probably a better solution would be to parse out the image caption and put it as text below the generated image, instead of constructing the characters as part of the image in the php file.

HermanHiddema · Post by **HermanHiddema** » Thu Feb 03, 2011 1:40 am

The original issue is described in post #4 and is as Kirby explains: The text should not be inside the image at all:

HermanHiddema wrote:I really dislike having the caption text be part of the image.

It's bad style from a web standards perspective, because it ignores user settings for fonts, so you're breaking accessibility.
It doesn't get indexed by search engines, nor by the forum search function, so it makes it harder to find things.
You can't format it with the forum tools, so no italic, bold, or things like @ (very useful in captions)

It would be much better, IMO, to put a div tag around the image, set to slightly more than the width of the image for text wrapping purposes, and have the text inside that div, under the image, as normal text.

An additional reason to fix this quickly is because the current implementation is also broken, e.g:

Click Here To Show Diagram Code: [go]$$B @ , @ $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

(This is a very common usage of captions)

Kirby · Post by **Kirby** » Tue Feb 08, 2011 8:56 am

I guess I finally have some time to fix this. I'll keep my status posted here as I work.

Kirby · Post by **Kirby** » Tue Feb 08, 2011 9:56 am

So I've modified the diagrams to use the captions as regular text. I'm still thinking about the scenario where formatting (eg. :b1:

) is used within the caption.

Kirby · Post by **Kirby** » Tue Feb 08, 2011 10:29 am

Okay, there you go:

Click Here To Show Diagram Code: [go]$$B @ , @ $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

Click Here To Show Diagram Code: [go]$$B I like $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

Click Here To Show Diagram Code: [go]$$B i like italic $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

Click Here To Show Diagram Code: [go]$$B and underlines $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

Click Here To Show Diagram Code: [go]$$B and weird characters: #@($*&!$)(*&!$#@ $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

Click Here To Show Diagram Code: [go]$$B and bold stuff $$ +------------------ $$ | 6 3 4 . . . . . . $$ | 2 1 O . . . . . . $$ | . O X X . . . . . $$ | 5 O O X X . . . . $$ | 9 X X O . . . . . $$ | . . . O . . . . . $$ | . . O . . . . . . $$ | . . . . . . . . . $$ | . . . . . . . . .[/go]

I made the text bold by default, because it doesn't seem to look that nice otherwise. Let me know if you want this updated, or anything else.

HermanHiddema · Post by **HermanHiddema** » Tue Feb 08, 2011 10:54 am

Kirby wrote:Okay, there you go:

I made the text bold by default, because it doesn't seem to look that nice otherwise. Let me know if you want this updated, or anything else.

Wonderful, thanks!

Personally, I would prefer if diagrams were put inside a box, with the caption inside it and a (faint) line around it. Not bold by default would then allow the use of bold for emphasis.

If that box would also float to the left, allowing the text to flow around it, that would be great. The current implementation results in a lot of white space next to diagrams, and thus makes posts longer than they need to be, IMO.

Anyway, this is already a huge improvement!

Redundant · Post by **Redundant** » Tue Feb 08, 2011 11:36 am

This update really messes with the formatting of the malkovich games. For example, look at big brother 3.

Kirby · Post by **Kirby** » Tue Feb 08, 2011 11:37 am

Setting the surrounding div to have left float seems to mess up the layout, particularly with the stuff that's below a diagram. I will mess with the formatting and see if I can adjust it to get the behavior that you suggest.

Life In 19x19

Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed

Re: Diagram Captions Should Be Fixed