jquery mb.flipText
Never needed to flip your text vertically?
jquery.mb.flipText is a simple plug-in to turn your text vertically in both direction: top-bottom or bottom-top.Wasn’t that something you would have done on your HTML pages?
demo page:
http://pupunzi.com/#mb.components/mb.flipText/flipText.html
jQuery project page:
http://plugins.jquery.com/project/mbFlipText
download example:
http://mbideasproject.googlecode.com/files/jquery.mb.flipText.1.0.zip
documentation:
http://code.google.com/p/mbideasproject/wiki/mbFlipText
Please expressions from right to left does not support! Help me
i’m using this and i think it’s fantastic. an example of what i used it for is here: http://elinbrita.com/
one thing i would say is that it doesnt handle some html characters well, hyphens in wordpress titles and accented characters don’t render properly. Is there something I’m doing wrong in that respect?
anyway, regardless of that its really really great work, congratulations
Hi James,
This could depend by the char encoding of your page; try sing the UTF-8 encodinng ( or if HTML5).
Bye,
Matteo
utf-8encoding is set on both the page, in htaccess, and the DB, but its no big deal really. One thing i did have an issue with was that if you resize the text via page zoom, you get scrollbars around the text which makes it unreadable (firefox is fine, but chrome and safari have this issue)
It’s not a massive problem, but for mac users it can be a bit of a pain if your trackpad is set up to zoom. I have tried crazy amounts of css to remove scrollbars from the object element and it’s children, but nothing seems to work. I havent found any way to detect font size changes using a zoom either.
I was wondering if future developments of this plugin might be able to detect this change at all?
Anyway, as i mentioned before, great work. Not only for this plugin but also for some of the other interesting projects you’ve been working on!
I am using the language of middle Asia but does not support this technique for flip text you help me please!
Hi Mohammad,
actually i’ve no support for RL; This component is replacing the text with an SVG embed element; I’m going to see if SVG support RL in a simple way and how to apply to jquery.mb.fliptext component.
Anyway if you can improve it you are wellcome!
Bye,
Matteo
Doesn’t seem too difficult to apply RTL to SVG text.. a number of examples at W3C: http://www.w3.org/International/tests/svg/test-direction-alignment-0
Nice extensions btw
I would really appreciate help on improving such feature… if you have a solution post me your code.
Thnx,
Matteo
Hi There, Is there any way to create a new line vertical text?
Hi Ryan,
wrap each of your lines into SPANs, give a class and set font, color and size for the text; set the display as “inline-block” or “float: left”; init those line with mbFlipText().
It should work.
Bye,
Matteo
Why can’t font-weight be controlled via css?
I think this could be an SVG limitation… don’t know why.
Hey Matteo,
Thanks for the reply. It’s still a very cool plug-in, and is a much easier and comprehensive way to get vertical text among a broad spectrum of browsers. Thanks for your effort!
Hey Matteo,
I am having some trouble getting the bold font weight applied to the vertical text after it’s flipped.
I modified the .js file to add a fontweight:bold parameter when building you are building the placeholder, but that didn’t resolve it either. Basically they show up bold, and as soon as they rotate, the bold is gone. Is this a limitation with the plugin, svg transform, or am I not doing something correctly?
Any help you can give would be greatly appreciated!
Hei Mateo,
Very nice plug-in, thank you. I was wondering if your method can be adapted to rotate text to a custom degree, not only 90 and -90. Thank you.
Hi Andrei,
actually it can be rotated just by 90°, sorry…
Bye,
Matteo
Hi,
Is anyone having trouble getting this to work in Safari Mac.
I have got it working, but it doesn’t appear every time i refresh the page or go to a new page… like one time it will show the text (rotated) then i hit refresh and its gone!, hit refresh and it might come back!
Very weird?!?!
Hi, I spend some time doing this myself, but when I found your plugin I was done immediately
Love jQuery and all of its plugins. One thing though … why did you include that (div class=’pointer’ .. /) ? I use your plugin for texts in table headers and the (div) I mentioned is over the complete table and I was not able to click anywhere anymore. Works fine without the (div), but I guess it was there for a reason? Thanks.
Hi Jonne,
I introduced the “pointer” DIV because Safari was unable to catch any event binded to the SVG element or to it’s container and this solved the problem. You had problems because the container of your rendered text needs a position:”relative”; this way the “pointer” DIV remains inside the text area. Anyway you can remove it if you don’t need it.
Bye,
Matteo
I wonder if the if-statment on line 65 has a bug in it:
var cssPos= $(this).css(“position”)!=”absolute” || $(this).css(“position”)!=”fixed” ?”relative” : $(this).css(“position”);
Should be:
var cssPos= $(this).css(“position”)!=”absolute” && $(this).css(“position”)!=”fixed” ?”relative” : $(this).css(“position”);
Otherwise you cant get either absolute or fixed position.
Hi dsub,
it’s a bug,
will be fixed in next release.
thnx,
Matteo
It’s not working very well in Safari version 4.1.3
Text is rotated but it’s highlighted with black for some reason. My text is gray but after it’s rotated, it’s suddenly enclosed in a box filled with black! not so nice.
Thanks.
I am also having the same black box issue with flipped text in Safari. Investigating…
The solution is to explicitly style the specific element being flipped. The mbFlipText javascript extracts the css color from the element and defaults to black if there is none. So, even though the element behind your text is gray the element itself has an undefined css background color. So set your element’s bg color to grey and you’ll be good to go.
Hi Dan,
Yes, I had to add the background to the svg element because Webkit doesn’t accept transparency on text box elements; this is a work around, any good suggestion is wellcome.
Bye,
Matteo
Hi Matteo, very usefull plugin, great work!
I have problems when I print pages (such as reports). Print preview is ok, but with various printer driver (also pdfcreator) flip text is reflected and/or blended.
Is there a workaround?
thanks
Hi Davide,
I don’t have workarounds for this problem,
I’ve no such problem working on Os x, I can print as PDF or on paper correctly;
I’ll make some test on Windows platform to reproduce your issue and see if there’s a solution.
I’m sorry,
Ciao,
Matteo
I am not able to make the text bold how can I do that.
I’ve tried to implement this but seams that SVG can’t render BOLD text adding font-style=\”bold\” to the TEXT tag of the embed.
If you findout the way please let me know.
Bye,
Matteo
I think I found a bug. When I use Chrome browser and I zoom in on the page (Ctrl+), scrollbars appear around the vertical text in the element. This only happens in Chrome.
Hi Boson,
Yes, it’s a known bug due to how webkit renders SVG elements…
Hope to find a solution.
Bye,
Matteo
Hi Matteo,
I downloaded your flipText file, and for the most part, have had great success with it. Thank you for your development.
I’ve tested on a number of browsers, and Firefox 5.0 renders the text differently from the others. The row height seems to be fixed at about one character height, so the majority of the text is hidden. Any ideas for how to change or fix the row height in your script?
Thanks again!
Nikole
i want code for imageflip in verically ?how to develop this in jquery? can u send it to my mail “nareshyeddu@gmail.com”
and if you want “unflip” the text ? Is it possible ?