Ada kalanya kita ingin membuat vertikal text, namun ternyata kode css yang ada tidak bisa berjalan mulus di browser firefox, kode css berikut :
<style type="text/css">
.teksVertical {
writing-mode: tb-rl;
filter: flipH flipV;
letter-spacing:2px;
}
</style>
Kode diatas memang membuat teks tampil secara vertikal di IE, namun di firefox teks tetap mendatar layaknya tak ada style, berikut trik supaya bisa membuat teks vertikal :
1. Jadikan teks menjadi gambar vertikal dengan PHP GD, perintah ImageStringUp.
2. Panggil dengan perintah HTML <img src="gambar.png"/>
Kira-kira Scriptnya begini :
Quick Code
< ?php
header ("Content-type: image/png");
// imagecreate (x width, y width)
$img_handle = imagecreate (15, 220) or die ("gagal membuat gambar");
// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 153, 204, 255);
$txt_color = ImageColorAllocate ($img_handle, 0, 0, 0);
ImageStringUp ($img_handle, 3, 1, 215,'Test Text Vertical', $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);
?>
Silahkan dicoba sendiri ya..
