Upside Down Text BBCode

[Thelonius Beck]

~This should work for any version.~

A member on my site requested this, and after failing to find one here, I went ahead and slapped it together.

Description: BB Code that inverts text, smileys, images..whatever. Tested in Firefox, Opera, Safari, Chrome, and IE.

122198

Upload included button image to "images/editor" folder (Change if using alternative images folder)122199


In "All Style Options > Additional CSS Definitions" add;


/* ***** Flip Code ***** */
.flip {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=2);
display: inline-block;
}
Add New BB Code;
Title: Flipped TextBB Code Tag Name: flipReplacement: <div class="flip">{param}</div>Description: Invert Text VerticallyUse {option}: NoButton Image (Optional)images/editor/flip.gifRemove Tag If Empty: YesDisable BB Code Within This BB Code: NoDisable Smilies Within This BB Code: NoDisable Word Wrapping Within This BB Code: No
-=[ UPDATE: I HAVE ADDED A SCREENCAP, BUTTON IMAGE, AND A DOWNLOADABLE COPY OF THESE INSTRUCTIONS & IMAGES]=-

[sulasno]

tagged and thanks

is there a live demo ?

[Thelonius Beck]

Sure. Here is the thread I made to intro the code on my site.

http://www.crowsnestforums.com/showthread.php?t=2284

WARNING: Crude language.

[sulasno]

thanks

I am going to install without telling the rest of the members and use it to irritate some <beg>

edit

installed and working in 4.0.7

including an example and adding an image would make the code complete

[Thelonius Beck]

:cool: Nice. You've gotta love the fact that nobody reads the FAQ sometimes, ehh?

[PattiOz]

Cool :) installed

[Thelonius Beck]

Thanks, glad you like it.

Y'all should click install, y'know, to prop up my fragile ego.

[thincom2000]

You know, if it was a div with display: inline-block, it would work in the middle of a sentence. Just tested here with some CSS fiddling.

[Thelonius Beck]

You know, if it was a div with display: inline-block, it would work in the middle of a sentence. Just tested here with some CSS fiddling.

D'OH!

Oh dude, THANK YOU for the Head-slap moment!

[sulasno]

I shall leave being flipped to your imaginations

I tried the above in my forum and "flipped" is on the second line and goes to the end of the textarea in 4.0.7

[Thelonius Beck]

Is that with the updated code, or the original? Unfortunately I do not have a 4.x.x installation to test it on.

[sulasno]

updated code

edit

tested with flipping a whole sentence and it aligns to the right of the screen

[Thelonius Beck]

OK, can you link me to an example post?

[sulasno]

link will be removed after testing

link removed

[Thelonius Beck]

Is the code currently installed on your forum? I have no hope of finding the error if it's not installed.

***Sorry, looking at the wrong skin.

[Thelonius Beck]

OK sulasno, you're code is identical to what I am running on my board, at least on your last 5 selectable styles. Nothing on the first 2.

I have to point out, that the alignment in that post appears correct. Are you, per chance, using an older browser?

[sulasno]

sorry I forgot to inform you that I did not add the Additional CSS Definitions to the default style

I suppose I was thinking that the alignment of the BBcode should be right instead of left (correct side up)

[Thelonius Beck]

I must apologize here. Maybe I'm just tired, but I'm at a loss as to what you're looking for. Are you looking for a backwards flip, where the text remains upright, but is "mirrored" horizontally?

*******************************

Note: I'll see about adding some screencaps to the first post, as per your suggestion, tomorrow.

[sulasno]

no; your mod is working prefectly;

I thought the flipped words would be right aligned;

I expected this;

Normal sentence
Flipped sentence
Normal sentence

What I see on my screen is;

Normal sentence
Flipped sentence
Normal sentence

[Thelonius Beck]

Really? You should not see that. I do not see that on your site. It appears that your browser is not supporting the "display: inline-block". What browser are you using?

[sulasno]

I tried with Slim Browser, Maxthon and Avant (all variants of IE)

I am going to try with my other 7+ browsers :-)

Opera is working prefectly
so it Chromium
Safari is working too

[Thelonius Beck]

I tried with Slim Browser, Maxthon and Avant (all variants of IE)

I am going to try with my other 7+ browsers :-)

Opera is working prefectly
so it Chromium
Safari is working too

That makes sense then. I only tested in the five most popular browsers.

Also, I added the screenshot you suggested, a button image for default style, and packaged everything up into a download.

[sulasno]

I would have thought that you would have use a flip "F" instead of an "A" :-)

[Thelonius Beck]

LOL, didn't think of that.

[modernbliss]

Does anyone know of an easy way that I can install this and automatically make all posts formatted this way? We like to antagonize our members on April 1. Making them go blind with all upside down text would be fantastic.