Таблицы

Большая_Медведица · September 4, 2008

Подскажике, как можно в ячейке таблицы изменить направление текста с горизонтального на вертикальный. Т.е. повернуть на 90 градусов?

DjTarik · September 4, 2008

Подскажике, как можно в ячейке таблицы изменить направление текста с горизонтального на вертикальный. Т.е. повернуть на 90 градусов?

Насколько мен известно - повернуть сами буквы с помощью CSS и HTML - невозможно... В таблице можно написать текст таким образом:

т

е

к

с

т

P.S. Тоже ведь вертикально...

ZoNT · September 4, 2008

повернуть возможно: в ИЕ использется фильтр (не помню какой, здесь на форуме был пример), в остальных браузерах svg

Amigos · September 4, 2008

Шрифтом.

Невоможно, никак, нигде и не при каких обстоятельствах.

Бьётся кернинг шрифта при любом вмешательстве изменений

откланающих текст хотя бы на 1 градус, будь то скрипт или уж

тем более фильтр который при этом теряет половину свойств

потому что фильтр это уже не текст.

Единственный вариант картинка +)

Ещё можно скриптом конвертить вертикальные надписи(как уже было проиллюстрировано выше)

я правда ещё один способ заню и то со своими накладками,

оооочень замороченый только. долго описывать не хочется.(

Edited September 4, 2008 by Amigos

ZoNT · September 4, 2008

Специально для Amigos:

<html>
<head>
<style>
div.vcanv {
	display: block;
	filter: flipv() fliph;
	writing-mode: tb-rl; 
	width: 14px;
	height: 150px;
}
body[class|="page-body"] div.vcanv{
	display: none; 
}
.obj {
	display: none;
}
html>body .obj{
	display: block; width: 42px; height: 200px; 
}
</style>
</head>

<body class="page-body">
<div class=vcanv>Ваш текст</div>
<object data="data:image/svg+xml,
	<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='12' class='rotate_text' transform='rotate(-90)'>
	<tspan>Ваш текст</tspan>
	</text></svg>" type="image/svg+xml" style="width: 15px;" class="obj"/>
</html>

Amigos · September 4, 2008

отруби теперь CearType и сделай zoom+ в IE6 для примера.

ZoNT · September 4, 2008

Если ты ещё не понял, то мне насрать на ИЕ6.

Плюс я не утверждал (!!!) что в ИЕ это будет офигенно выглядеть.

Amigos · September 4, 2008

60% мировых пользоватлей в IE - нас рать ...

Вот ты мне и ответь как эксперт наккой нужно решение работающее в лучшем 40 случаях из 100?!

Решение, если это решение конечно, напомню - не бывает не законченным,

бывает незаконченная задача.

ZoNT · September 4, 2008

Как заметил Homm (ранее, не в этом топике), задачи есть разные. Ты делаешь для всех, а я делаю для корпоративных пользователей. И они будут пользоваться тем браузером, которым скажут.

а в 60% сколько входит ИЕ6?

klierik · September 4, 2008

Автор темы ничего не говорил про поддержку в IE

Victor Ananiev · September 4, 2008

а низя ли для ИЕ отдельно прикрутить фильтр? ну типа проверить ие или не ие а дальше по шаблону)

ZoNT · September 4, 2008

там и так для ИЕ отдельный фильтр, а для нормальных браузеров - svg

Amigos · September 4, 2008

..... И они будут пользоваться тем браузером, которым скажут.

Логично. Вполне же нормально сначало положить асфальт потом под ним начать трубы прокладывать.

Автор темы ничего не говорил про поддержку в IE

ближайший пример. Safary opear ff всё идеально?

а низя ли для ИЕ отдельно прикрутить фильтр? ну типа проверить ие или не ие а дальше по шаблону)

можно+) выше выяснили почему нельзя.

а в 60% сколько входит ИЕ6?

... если хотябы 16%, это больше чем ближайший второй по рейтингу браузер.

Victor Ananiev · September 4, 2008

ай, правтыкал)))

ZoNT · September 4, 2008

ближайший пример. Safary opear ff всё идеально?

Всё идеально. Различий нет (svg - он и в Африке svg).

Джин · September 4, 2008

если делать, то делать чтоб везде работало. Лучше делать картинкой (ИМХО)

Amigos · September 4, 2008

Всё идеально. Различий нет (svg - он и в Африке svg).

корпоративное - "Принимаетя"! Кроме "идеальных" конечно, главная проблема будет сказать всего лишь глупому пользователю установить SVG плагин, и всего делов, а это снова вопросы к IE, а это значит на сегодняшний день во всяком случае - это нерешенная задача. фильтры в расчет не идут так как лушче уж будет отказаться вообще.

Данный вопрос закрыт. Каждый смотрит сабж и делает свои выводы.

Edited September 4, 2008 by Amigos

ZoNT · September 4, 2008

корпоративное - "Принимаетя"! Кроме "идеальных" конечно, главная проблема будет сказать всего лишь глупому пользователю установить SVG плагин, и всего делов, а это снова вопросы к IE, а это значит на сегодняшний день во всяком случае - это нерешенная задача. фильтры в расчет не идут так как лушче уж будет отказаться вообще.
Данный вопрос закрыт. Каждый смотрит сабж и делает свои выводы.

Какой плагин? Ты о чём? Svg поддерживается браузерами (кроме ИЕ) без плагинов.

Amigos · September 4, 2008

завуалированное слово "идеальных" в кавычках как раз и имеет ввиду браузер IE(как выяснилось только что) браузер номер 1 в мире.

Edited September 4, 2008 by Amigos

rus · September 5, 2008

я уже как-то приводил в одном топике этот код, просто не помню где, работает во всех браузерах:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style type="text/css">
.vertical {
	width: 1em;
	line-height: 1em;
}
.separator {
	height: 1.4em;
}
</style>
</head>
<body>
<div class="vertical"> Э т и
  <div class="separator"></div>
  с л о в а
  <div class="separator"></div>
  н у ж н о
  <div class="separator"></div>
  р а з д е л и т ь
  <div class="separator"></div>
  п у с т ы м и
  <div class="separator"></div>
  б л о к а м и.</div>
</body>
</html>

ZoNT · September 5, 2008

я уже как-то приводил в одном топике этот код, просто не помню где, работает во всех браузерах:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style type="text/css">
.vertical {
	width: 1em;
	line-height: 1em;
}
.separator {
	height: 1.4em;
}
</style>
</head>
<body>
<div class="vertical"> Э т и
  <div class="separator"></div>
  с л о в а
  <div class="separator"></div>
  н у ж н о
  <div class="separator"></div>
  р а з д е л и т ь
  <div class="separator"></div>
  п у с т ы м и
  <div class="separator"></div>
  б л о к а м и.</div>
</body>
</html>

Ты задание читал? Развернуть на 90 градусов! У тебя ничего не разворачивается на 90 градусов.

rus · September 5, 2008

Ты задание читал? Развернуть на 90 градусов! У тебя ничего не разворачивается на 90 градусов.

Да, попутал...

Edited September 5, 2008 by rus

serjico · September 23, 2009

Подскажике, как можно в ячейке таблицы изменить направление текста с горизонтального на вертикальный. Т.е. повернуть на 90 градусов?

можно только в IE с помощью ActiveX

сложная такая схема, можно подсмотреть как это делаеться через визуальные редакторы подсмотреть

а так

обычно используют картинки (текста на боку)

я собыраюсь использовать таблици с ячейками по 1px (ну 2) для заполнения с JS чтобы иметировать текст

боюсь что затраты скрипта дороже обойдуться чем картинки (в виде мемори)

————————-

это я вижу так за место текста поставить таблицу с ячейками в 1пиксл

и закрасить их соотвественно

00111100

01000010

10000001

10100101

10000001

10100101

10011001

01000010

00111100

Edited October 14, 2009 by serjico

Sign In

Таблицы

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information