Diagram Captions Should Be Fixed

Kirby · #1

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 · #2

Click Here To Show Diagram Code: [go]$$Wc Thanks Kirby $$|------------------- $$|. . . . . . . . . . | $$|. . . . . . . . . . | $$|-------------------[/go]

Kirby · #3

No problem.

HermanHiddema · #4

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 · #5

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.

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 · #6

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 :w2:

at a. See this Sensei's page for more information".

daniel_the_smith · #7

HermanHiddema wrote:

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 · #8

Kirby wrote:

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 · #9

HermanHiddema wrote:

Kirby wrote:

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 · **#10**

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

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.

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:

[go]{TEXT}[/go]

replaced by:

Code:

<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 · **#11**

fwiffo wrote:

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 · **#12**

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:

[go]{TEXT}[/go]

with:

Code:

Then the following:

Code:

[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:

<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 · **#13**

fwiffo wrote:

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:

[go]{TEXT}[/go]

with:

Code:

Then the following:

Code:

[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:

<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 · **#14**

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

HermanHiddema · **#15**

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

fwiffo · **#16**

I've added this to the todo list.

HermanHiddema · **#17**

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 · **#18**

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...

Jordus · **#19**

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 · **#20**

Some characters are parsing badly

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

Diagram Captions Should Be Fixed

Who is online