Diagram Captions Should Be Fixed

[Jordus]

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]

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

[Kirby]

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]

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

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:

$$B :b7: @ :b1:, :w8: @ :b3:
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B :b7: @ :b1:, :w8: @ :b3:
$$ +------------------
$$ | 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]

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

[Kirby]

So I've modified the diagrams to use the captions as regular text. I'm still thinking about the scenario where formatting (eg. ) is used within the caption.

[Kirby]

Okay, there you go:

$$B :b7: @ :b1:, :w8: @ :b3:
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B :b7: @ :b1:, :w8: @ :b3:
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .[/go]

$$B I like :batman:
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B I like :batman:
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .[/go]

$$B [i]i like italic[/i]
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B [i]i like italic[/i]
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .[/go]

$$B [u]and underlines[/u]
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B [u]and underlines[/u]
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .[/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 . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

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]

$$B and [b]bold[/b] stuff
$$ +------------------
$$ | 6 3 4 . . . . . .
$$ | 2 1 O . . . . . .
$$ | . O X X . . . . .
$$ | 5 O O X X . . . .
$$ | 9 X X O . . . . .
$$ | . . . O . . . . .
$$ | . . O . . . . . .
$$ | . . . . . . . . .
$$ | . . . . . . . . .

Click Here To Show Diagram Code

[go]$$B and [b]bold[/b] 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]

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]

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

[Kirby]

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.

[Kirby]

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

I think you might have caught things when I was experimenting with Herman's suggestion. I removed the float left that was requested. Does it look alright now (minus the fact that the box is too wide)? I may do some more experimenting in the near future.

[Redundant]

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

I think you might have caught things when I was experimenting with Herman's suggestion. I removed the float left that was requested. Does it look alright now (minus the fact that the box is too wide)? I may do some more experimenting in the near future.

It's fixed.

[Kirby]

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!

I have tried doing all of the things that you mentioned, but setting the box to left float seems to hurt the layout when there are multiple diagrams in a single post. For now, I am using align-block, with an added modification so that it shows up in IE.

The box seems to wrap around the image and caption, now, but as you can see, the text is not to the right of the image this way, as you desire.

If you have any suggestions regarding the left float situation, please feel free to let me know. Until I solve that issue, I'll take the other suggestions you had (box around image and text, and not bolding the text).

[daniel_the_smith]

They look great! Thanks!

[Joaz Banbeck]

Thank you, Kirby!