Diagram Captions Should Be Fixed

[Kirby]

Diagram captions should be fixed, now. You should be able to post long amounts of text, and it should automatically wrap for you. Here is an example:

viewtopic.php?f=14&t=63&p=185#p185

Please let me know how you like the color scheme and/or general appearance.

[Joaz Banbeck]

$$Wc Thanks Kirby
$$|-------------------
$$|. . . . . . . . . . |
$$|. . . . . . . . . . |
$$|-------------------

Click Here To Show Diagram Code

[go]$$Wc Thanks Kirby
$$|-------------------
$$|. . . . . . . . . . |
$$|. . . . . . . . . . |
$$|-------------------[/go]

[Kirby]

No problem.

[HermanHiddema]

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.

[Kirby]

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.

So would you like to use any of the forum tags in the caption? If so, do you want the caption input method to remain a part of the diagram code? Right now we use sltxt2png's built in caption parsing, but if we allow for all forum tags, maybe we can do this a different way.

[fwiffo]

On Sensei's you can put in wiki markup inside diagram captions, so it makes sense to be able to use bbcode markup and smilies and stuff inside the captions here. I can imagine for instance having a caption that says something like "Joseki is at a. See this Sensei's page for more information".

[daniel_the_smith]

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.

+1

[HermanHiddema]

So would you like to use any of the forum tags in the caption? If so, do you want the caption input method to remain a part of the diagram code? Right now we use sltxt2png's built in caption parsing, but if we allow for all forum tags, maybe we can do this a different way.

Ideally, the caption would just be passed back to the bbcode interpreter, yes.

[Kirby]

So would you like to use any of the forum tags in the caption? If so, do you want the caption input method to remain a part of the diagram code? Right now we use sltxt2png's built in caption parsing, but if we allow for all forum tags, maybe we can do this a different way.

Ideally, the caption would just be passed back to the bbcode interpreter, yes.

Okay, that sounds good... I'll have to think for a little bit about how to implement this.

[fwiffo]

The caption has already been passed through the bbcode interpreter by the time it gets to your javascript...

$$B This is the caption
$$ ------------
$$| . . . 2 . .
$$| . a 1 . b .
$$| . . . . . .

Click Here To Show Diagram Code

[go]$$B This is the caption
$$ ------------
$$| . . . 2 . .
$$| . a 1 . b .
$$| . . . . . .[/go]

So you ought to be able to just pull out everything from the first line after the first whitespace and put it in its own tag after the image. One problem is that many of the bbcodes will insert " marks, which will cause you to have invalid javascript and creates injection security issues.

$$B This is the caption
$$ ------------
$$| . . . 2 . .
$$| . a 1 . b .
$$| . . . . . .

Click Here To Show Diagram Code

[go]$$B This is the caption
$$ ------------
$$| . . . 2 . .
$$| . a 1 . b .
$$| . . . . . .[/go]

To get around that, I'd put the diagram data in a separate tag and have the javascript pull it out with innerHTML instead of trying to insert it into the javascript itself. E.g.:

Code: Select all

[go]{TEXT}[/go]

replaced by:

Code: Select all

<pre style="display: none;" class="go-diagram">{TEXT}</pre><script type="text/javascript">... javscript code ...</script>

The script is probably getting complicated enough that it might be worth moving into a separate file. Rather than having some inline javascript with each diagram, just loop over all the pre elements with the go-diagram class and process them all at once in a body.onload event. Perhaps we should install jquery to simplify this kind of thing.

Sorry! I should not be back-seat coding.

[Kirby]

The caption has already been passed through the bbcode interpreter by the time it gets to your javascript...

...

No problem about backseat coding - we're on the same team

Anyway, I guess that I don't understand exactly how the bbcode parser works.  Are you saying that, if you put tags into the conversion text, they will be parsed later on down the line?

So if I have:
[go1]{TEXT}[/go1] 

and convert it to
[funkytag]{text}[/funkytag]

The "funkytag" code will then be executed?

If it works this way, what happens if I have the following definitions:
1.) [go1]{TEXT}[/go1] --(converts to)--> [funkytag]{TEXT}[/funkytag]
2.) [funkytag]{TEXT}[/funkytag] -->(converts to)--> [go1]{TEXT}[/go1]

[fwiffo]

No, I'm saying the bbcode parser has already parsed any tags inside diagram code before you even get to do anything with it, and it does it in one pass.

For example, imagine we had a simpler bbcode rule that replaces:

Code: Select all

[go]{TEXT}[/go]

with:

Code: Select all

<pre class="go-diagram">{TEXT}</pre>

Then the following:

Code: Select all

[go]$$B This is [i]a caption[/i] with [url=http://lifein19x19.com]<this link> & [b]bold text[/b][/url]
$$  ----------------------
$$ | . . . . . . . . . . .
$$ | . . . . . . . . . . .
$$ | . . . 5 3 4 . . . 8 .
$$ | . . 1 , 2 6 . . . . .
$$ | . . . . . . . . . . .
$$ | . . 7 . . . . . . . .
$$ | . . . . . . . . . . .[/go]

gets replaced with:

Code: Select all

<pre class="go-diagram">$$B This is <em>a caption</em> with <a href="http://lifein19x19.com">&lt;this link&gt;</a><br /> &amp; <strong>bold text</strong>
$$  ----------------------<br />
$$ | . . . . . . . . . . .<br />
$$ | . . . . . . . . . . .<br />
$$ | . . . 5 3 4 . . . 8 .<br />
$$ | . . 1 , 2 6 . . . . .<br />
$$ | . . . . . . . . . . .<br />
$$ | . . 7 . . . . . . . .<br />
$$ | . . . . . . . . . . .</pre>

or something similar (I'm pretty sure it removes the newlines, but I left them in for readability). You can see it replaced the bbcodes inside your [go] bbcode with the equivalent HTML and escaped special HTML characters like <, > and &. Smilies would also be converted to the appropriate <img> tags.

Your funkytag example would not do anything weird, because it's only a single pass. so [go1] would get converted to [funkytag] but that would be it, and viewers would just see [funkytag]. It wouldn't go into an infinite loop or anything.

My explanation may have been confusing, cause if you click on the "show diagram code" for the first example you'd see the word "caption" in italics because the [i] bbcode I put in there got converted to an <em> (as you can see in the diagram itself). So "show diagram code" is lying because it doesn't unconvert the bbcodes or anything. That's a much hairier problem. I don't know if bbcodes have a mechanism to allow certain text inside your tag to go through unmolested. My guess is that it does not because it would be really easy to create HTML injection vulnerabilities.

[Kirby]

No, I'm saying the bbcode parser has already parsed any tags inside diagram code before you even get to do anything with it, and it does it in one pass.

For example, imagine we had a simpler bbcode rule that replaces:

Code: Select all

[go]{TEXT}[/go]

with:

Code: Select all

<pre class="go-diagram">{TEXT}</pre>

Then the following:

Code: Select all

[go]$$B This is [i]a caption[/i] with [url=http://lifein19x19.com]<this link> & [b]bold text[/b][/url]
$$  ----------------------
$$ | . . . . . . . . . . .
$$ | . . . . . . . . . . .
$$ | . . . 5 3 4 . . . 8 .
$$ | . . 1 , 2 6 . . . . .
$$ | . . . . . . . . . . .
$$ | . . 7 . . . . . . . .
$$ | . . . . . . . . . . .[/go]

gets replaced with:

Code: Select all

<pre class="go-diagram">$$B This is <em>a caption</em> with <a href="http://lifein19x19.com">&lt;this link&gt;</a><br /> &amp; <strong>bold text</strong>
$$  ----------------------<br />
$$ | . . . . . . . . . . .<br />
$$ | . . . . . . . . . . .<br />
$$ | . . . 5 3 4 . . . 8 .<br />
$$ | . . 1 , 2 6 . . . . .<br />
$$ | . . . . . . . . . . .<br />
$$ | . . 7 . . . . . . . .<br />
$$ | . . . . . . . . . . .</pre>

or something similar (I'm pretty sure it removes the newlines, but I left them in for readability). You can see it replaced the bbcodes inside your [go] bbcode with the equivalent HTML and escaped special HTML characters like <, > and &. Smilies would also be converted to the appropriate <img> tags.

Your funkytag example would not do anything weird, because it's only a single pass. so [go1] would get converted to [funkytag] but that would be it, and viewers would just see [funkytag]. It wouldn't go into an infinite loop or anything.

My explanation may have been confusing, cause if you click on the "show diagram code" for the first example you'd see the word "caption" in italics because the [i] bbcode I put in there got converted to an <em> (as you can see in the diagram itself). So "show diagram code" is lying because it doesn't unconvert the bbcodes or anything. That's a much hairier problem. I don't know if bbcodes have a mechanism to allow certain text inside your tag to go through unmolested. My guess is that it does not because it would be really easy to create HTML injection vulnerabilities.

I understand, now... It's definitely doable, then.

[HermanHiddema]

Bump. This hasn't been fixed yet, as far as I can see?

[HermanHiddema]

Bumping yet again. I'm currently avoiding the use of diagram captions in all my posts for this reason, so please fix it