Page 1 of 1
Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 8:14 am
by Kirby
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:
$$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 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------
- 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.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 8:35 am
by HermanHiddema
Kirby wrote: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.
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.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 8:45 am
by Kirby
HermanHiddema wrote: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?
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 8:48 am
by HermanHiddema
Kirby wrote:HermanHiddema wrote: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.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 10:55 am
by Joaz Banbeck
Thanks, Kirby. I had been intending to request that.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 11:05 am
by Kirby
Joaz Banbeck wrote: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.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 11:48 am
by Dusk Eagle
Kirby wrote: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?
$$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 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------
- 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]
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 11:53 am
by Phelan
Same thing on my WinXP Firefox.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 11:53 am
by Kirby
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.
Re: Forum Diagram Annotation Wrapping
Posted: Thu Mar 03, 2011 1:34 pm
by daniel_the_smith
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...