Forum Diagram Annotation Wrapping

Kirby · Post by **Kirby** » Thu Mar 03, 2011 8:14 am

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:

Code: Select all

\n

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.

HermanHiddema · Post by **HermanHiddema** » Thu Mar 03, 2011 8:35 am

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.

Kirby · Post by **Kirby** » Thu Mar 03, 2011 8:45 am

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?

HermanHiddema · Post by **HermanHiddema** » Thu Mar 03, 2011 8:48 am

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.

Post by **Joaz Banbeck** » Thu Mar 03, 2011 10:55 am

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

Kirby · Post by **Kirby** » Thu Mar 03, 2011 11:05 am

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.

Dusk Eagle · Post by **Dusk Eagle** » Thu Mar 03, 2011 11:48 am

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?

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]

Phelan · Post by **Phelan** » Thu Mar 03, 2011 11:53 am

Same thing on my WinXP Firefox.

Kirby · Post by **Kirby** » Thu Mar 03, 2011 11:53 am

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.

daniel_the_smith · Post by **daniel_the_smith** » Thu Mar 03, 2011 1:34 pm

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

Edit: using Chrome.

Edit 2: working again now...

Life In 19x19

Forum Diagram Annotation Wrapping

Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping

Re: Forum Diagram Annotation Wrapping