Вертикальный текст

    Потребовалось мне использовать вертикальное расположения текста для обозначения заголовков таблицы. Поиски в интернете привели только к устаревшим или еще не утвержденным стандартам, фильтрам IE и не поддерживающих кириллицу или Mozilla Firefox SVG.
    Поэтому пришлось самому решать проблему. Немножко некрасиво получилось, но меня результат устроил.

    image


    function vtext($text) //Вертикальный текст
    {
      if (!file_exists(_SITE.'/style/img/crap/'.str2url($text).'.png')) {
    //  echo 'Создаём файл '.str2url($text).'.png<br /><br />';
        $pname = str2url($text);
        $txt = win2uni($text);
        $coord = imagettfbbox(_FONT_SIZE, 0, _FONT_NAME, $txt);
        /* возвращает массив, содержащий всевозможные координаты минимального прямоугольника, в который можно вписать данный текст. Вычисляем ширину и высоту текста:
        */

        $width = $coord[2] - $coord[0];
        $height = $coord[1] - $coord[7];
       
        $im=ImageCreate ($width,$height+(_FONT_SIZE/4));
        $background_color=ImageColorAllocate($im,255,255,255);
        $text_color=ImageColorAllocate ($im,0,0,0);
       
        imagettftext($im,_FONT_SIZE,0,0-(_FONT_SIZE/10),$height,$text_color,_FONT_NAME,$txt);
        $im2 = imagerotate ($im, 90, 0);
        ImagePNG($im2,$_SERVER['DOCUMENT_ROOT'].'/style/img/crap/'.$pname.'.png');
        ImageDestroy($im);
        ImageDestroy($im2);
        $to_return = '<img src="'._SITE.'/style/img/crap/'.$pname.'.png" />';
        echo $to_return;
      }
    }
    function win2uni($s)
    {
      $s = str_replace('і','i',$s);
      $s = str_replace('І','I',$s);
      $s = convert_cyr_string($s,'w','i'); // преобразование win1251 -> iso8859-5
      // преобразование iso8859-5 -> unicode:
      for ($result='', $i=0; $i<strlen($s); $i++) {
        $charcode = ord($s[$i]);
        $result .= ($charcode>175)?"&#".(1040+($charcode-176)).";":$s[$i];
      }
      return $result;
    }


    Использовать — естественно вызывать функцию с параметром — текстом, который нужно повернуть.
    vtext('Вертикальный текст');

    Единственное что — не работает со всем украинским алфавитом. Частично исправил заменой украинской "і" на английскую «i». Если есть варианты по исправлению данной проблемы — подскажите.
    Если есть вариант делать это проще — подскажите.

    P.S. Для создания имен файлов использую функцию транслитерации:
    <?php
    function rus2translit($string) {
    $converter = array(
    'а' => 'a', 'б' => 'b', 'в' => 'v',
    'г' => 'g', 'д' => 'd', 'е' => 'e',
    'ё' => 'e', 'ж' => 'zh', 'з' => 'z',
    'и' => 'i', 'й' => 'y', 'к' => 'k',
    'л' => 'l', 'м' => 'm', 'н' => 'n',
    'о' => 'o', 'п' => 'p', 'р' => 'r',
    'с' => 's', 'т' => 't', 'у' => 'u',
    'ф' => 'f', 'х' => 'h', 'ц' => 'c',
    'ч' => 'ch', 'ш' => 'sh', 'щ' => 'sch',
    'ь' => '\'', 'ы' => 'y', 'ъ' => '\'',
    'э' => 'e', 'ю' => 'yu', 'я' => 'ya',
    'і' => 'ui', 'ї' => 'uyi', 'є' => 'uye',
    'ґ'=>'ugi',

    'А' => 'A', 'Б' => 'B', 'В' => 'V',
    'Г' => 'G', 'Д' => 'D', 'Е' => 'E',
    'Ё' => 'E', 'Ж' => 'Zh', 'З' => 'Z',
    'И' => 'I', 'Й' => 'Y', 'К' => 'K',
    'Л' => 'L', 'М' => 'M', 'Н' => 'N',
    'О' => 'O', 'П' => 'P', 'Р' => 'R',
    'С' => 'S', 'Т' => 'T', 'У' => 'U',
    'Ф' => 'F', 'Х' => 'H', 'Ц' => 'C',
    'Ч' => 'Ch', 'Ш' => 'Sh', 'Щ' => 'Sch',
    'Ь' => '\'', 'Ы' => 'Y', 'Ъ' => '\'',
    'Э' => 'E', 'Ю' => 'Yu', 'Я' => 'Ya',
    'І' => 'uI', 'Ї'=>'uYi', 'Є'=>'uYe',
    'Ґ'=>'uGi'
    );
    return strtr($string, $converter);
    }
    function str2url($str) {
    // переводим в транслит
    $str = rus2translit($str);
    // в нижний регистр
    $str = strtolower($str);
    // заменям все ненужное нам на "-"
    $str = preg_replace('~[^-a-z0-9_.]+~u', '-', $str);
    // удаляем начальные и конечные '-'
    $str = trim($str, "-");
    return $str;
    }
    ?>


    Поделиться публикацией

    Похожие публикации

    Комментарии 36

      0
      ;)
      а вообще js библиотку рафаэль не обязательно использовать, если к SVG изучите VML (а можно текст повернуть в ворде, сохранить как html и вычленить нужный синтаксис)
        0
        Спасибо за ссылку — посмотрю.
        А насчет Ворда — не получится. Ворд — это не html-редактор (не в том смысле что нельзя, а в том смысле что какашка).
          +1
          он умеет генерировать VML
            0
            Уууу, лучше я картинками.
              0
              спецификацию никто не отменял
          0
          При беглом осмотре — как-то много кода. Но если проект большой и требует частого использования поворота текста (и не обязательно только на 90 градусов) — то да, рафаил — полезная библиотека.
            0
            так я и говорю — использовать библиотеку не обязательно.
            используйте SVG в связке с VML
              0
              Могу вам написать кусок поворота только текста и только на 90°. Будет намного короче. :)
                0
                А сама рафаил не нужна?
                  0
                  Сам Рафаэль позволяет делать несколько больше чем просто поворачивать текст на 90°. Естественно, если выковырять только поворот и только на 90°, то будет в разы короче.
                    0
                    Почему это Рафаэль, если Рафаил? Персонаж из библии.
                      0
                      Это не персонаж из Библии, а знаменитый художник эпохи возрождения. Читается как Рафаэль. :)
                      0
                      en.wikipedia.org/wiki/Raphael_(archangel)
                      ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%84%D0%B0%D0%B8%D0%BB
              0
              это вы что, для каждого показа генерируете таким вот образом картинки?
                0
                Нет, код внимательней посмотрите. Но да, для каждого повернутого текста генерирую картинку. По другому и проще — не знаю как.
                  0
                  да, извиняюсь, не увидел file_exist, под утро не очень внимателен :)
                    0
                    У меня было 5 утра ;-)
                0
                $s = convert_cyr_string($s,'w','i'); // преобразование win1251 -> iso8859-5
                // преобразование iso8859-5 -> unicode:

                Если писать по украински в unicode и и использовать ttf шрифт с уникодом, то украинский будет из коробки.
                  0
                  Шрифт фердана и ариал пробовал — ничего.
                    0
                    Всмысле ничего? У вас точно шрифт со украинским языком? У вас точно текст был в уникоде и по украински? Я вот думаю что нет :)
                      0
                      Нет укр символов. Да. Да.
                  0
                  По-моему, проще ориентацию таблицы изменить, названия столбцов сделать слева. Будет читабельнее.
                  В случае с электронном представлением, можно и еще лучше найти вариант, чем так изголяться. Например, только первые буквы с пунктирным подчеркиванием. При наведении — всплывающая подсказка.

                  Недопустимо то, что часть заголовков расположено горизонтально, а часть вертикально, как сейчас.
                    0
                    Допустимо разная ориентация. Недопустимо менять ориентацию.
                    –4
                    да чтоб ты всю жизнь читал тексты! :-[
                      –3
                      А в чем проблема? Глазки устали? И не тыкай мне.
                        0
                        *такие тексты
                        +4
                        Господи ты боже мой (с)
                        Всю статью можно ужать в:
                        «Для вертикального текста я использую повернутую на 90 градусов картинку с текстом. Для конвертации кириллицы я не использую iconv() потому-то и потому-то, а вместо нее наковырял свой велосипед.»

                        Все.
                          0
                          Ну попробуйте сделать как вы написали. Почему-то я не нашел ничего подобного (ну разве что кучу подобных нерабочих примеров).
                          0
                          А нельзя ли было переубедить заказчика в том что при горизонтальном тексте не надо головой крутить?
                            0
                            Заказчик — университет. Им не докажешь. Это научная работа, и отображение текста вертикально — не основная его тема.
                            0
                            Зачем вы конвертируете win в уникод? Сохраните файл в utf-8 и делов-то.

                            Такой вот код
                            <?php
                            header («Content-type: image/png»);

                            $text = 'Її Єє Іі Ґґ';
                            $font = './verdana.ttf';
                            $coord = imagettfbbox(20, 0, $font, $text);
                            $width = $coord[2]-$coord[0]+10;

                            $im = imagecreatetruecolor($width, 46);
                            $white = imagecolorallocate($im, 255, 255, 255);
                            $black = imagecolorallocate($im, 0, 0, 0);
                            imagefill($im, 0, 0, $white);
                            imagettftext($im, 20, 0, 0, 31, $black, $font, $text);
                            imagepng($im);
                            imagedestroy($im);
                            ?>

                            Делает такую вот картинку:

                              0
                              После загрузки картинки на upimg.ru ее почему-то растянуло. Генерится все четко.
                              0
                              После освоения imagemagick я оочень не люблю GD, кроме как для капчи, он к сожалению плоховато документирован для пхп, но у меня подобное делается примерно так пользуюясь родной документацией: popen(«convert -pointsize 12 -rotate -90 label: Текст имя файла»,'r');…
                              www.imagemagick.org/Usage/
                                0
                                Некрасиво. Лучше бы, уж, сделали картинками-пиктограммками, а там или всплывающие подсказки, или снизу комментарии
                                Или просто короче написать:
                                «Назва», " ", «Студентів», «Груп», «Потоків», «Курс», «Код», «Х»

                                И почему «групп» перед «потоками»?
                                  0
                                  Не я пректировал.
                                  0
                                  Не я проектировал.

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое