I noticed that people sometimes include annotation in their go diagrams, which are somewhat lengthy. This results in a long sentence that ends up overrunning the length of the image. It's also possible that someone would want to include line breaks in their comments.

To provide a bit of added functionality to the diagram annotation feature, you can now use the following text to indicate that you'd like to include a line break in a diagram:



Here's an example:

Click Here To Show Diagram Code

[go]$$W This is a game.\nI like it a lot.\nI decided that I'd make a poem about the game.\nOK, it's not really a poem...\nJust a string of sentences.
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . B . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . 3 . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . 1 O . . . . . . . . . . . . . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . X . . . . . . . . . . . . . . . |
$$ | . . X , . O . . . , . . . . . X . . . |
$$ | . . 2 O . . . . . . . . . O . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go]

I would like to force line wrapping if the comment text is of greater width than the image itself. I'm still thinking about how to do this, though, since the images are created on the fly.

In any case, please feel free to use the newline code above to put linebreaks in your diagram annotations.

The only way to do this is to set the width of the surrounding div to slightly more than the width of the image. You could use javascript for it, but there is no pure css way to create what they call a "shrink wrap" effect.

The width of the image is the variable I want to get at. As you know, the image is generated within the div on-the-fly from php, so I am not sure if information about the width of the image is available at the time that the div is constructed.

Is this inaccurate?

After page load, you could probably find the width of the img element and set the width of the surrounding div then.

Thanks, Kirby. I had been intending to request that.

No problem. I will still try to implement the "auto-wrapping" when the text extends the image width, but even then, I think I will leave the line break functionality in so that people can leave linebreaks at arbitrary locations.

The other issue I am pondering with the diagrams is the "Show Diagram Code" text that includes smileys. When we get the text for processing go diagrams, smileys have already been substituted in so the smileys show up in the code text. I'm trying to think of an easier way to show the original diagram code than manually parsing all of the text for every smiley we've added.

Is it that big of a deal? At least on my (KDE Linux, Firefox) system, when you copy an image as you copy text, the alternate text gets copied in the images' place. Since the alt-text of a smiley is the code to make that smiley, it copies seamlessly. Is that not the case on some OS or browser?

Click Here To Show Diagram Code

[go]$$W This is a game. \nI like it a lot. \nI decided that I'd make a poem about the game. \nOK, it's not really a poem... \nJust a string of sentences.
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . B . . . . . . . . . . . . . |
$$ | . . . O . . . . . , . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . 3 . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . 1 O . . . . . . . . . . . . . . . |
$$ | . . X . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . X . . . . . . . . . . . . . . . |
$$ | . . X , . O . . . , . . . . . X . . . |
$$ | . . 2 O . . . . . . . . . O . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go]

_________________
Memories of a sorceress girl
Endless fascination with the secrets of the world

Same thing on my WinXP Firefox.

_________________
a1h1 [1d]: You just need to curse the gods and defend.
Good Go = Shape.
Associação Portuguesa de Go

For me, the images are not pasted, but just ignored (only the text is pasted)... And, it's just a little annoying to me. I guess it's not a huge deal.

Whoa, did you do something else after the line break thing? Diagrams are all one character wide for me now...

Edit: using Chrome.

Edit 2: working again now...

_________________
That which can be destroyed by the truth should be.
--
My (sadly neglected, but not forgotten) project: http://dailyjoseki.com