Buat Iklan Vertikal Teks Menggunakan JQuery Flip-V | Create Vertical Ad Space Text Using JQuery Flip-V

I’ve searched on the internet how to make a vertical text using css. But i don’t find any css solution that have cross browser compability. On Internet Explorer, it has a writing-mode and filter property. By using these two properties, you could make a vertical text but just work only on Internet Explorer. Here is the code.

.vertical
{
font-family: verdana;
font-size: 0.95em;
writing-mode: tb-rl;
filter: fliph flipv;
}

And write this html code.

<div class="vertical">Vertical Text</div>

But like i said before, its only in IE. In other browser, we could use an SVG file. But if you want to combine this method, you have to tweak this method so that vertical text is displayed with no error in any browser. But this is not what you need, you need a single method that have ability to show this vertical text in any browser.

First, write this code..

<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/cvi_text_lib.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.flipv.js" type="text/javascript"><!--mce:2--></script>

To make your text is flip vertically is just add class=”flipv” to your <p> tag
.

CLICK TO ADVERTISE HERE
And you can add some style to your flipped text to make it more beautiful.

font-size: 16px;
color: #aaa;
font-weight: bold;
border: 1px solid #ccc;
min-width: 20px;
width: 220px;
padding-left: 10px;
max-width: 20px;
padding-right: 10px;
padding-top: 2px;

And you’re done! But for the best view, i think you should using image for your ad space rather than this technique. Because i don’t guarantee this technique will displayed a nice vertical text in many browser if you make a lot of css to beautified you vertical text.

Download the JQuery-FlipV Library First.