Вывод текста в треугольной ячейке

[novicheG]

Добрый день. Есть сложная таблица с разделенными (везде по разному) ячейками (думаю видели такие). Собственно сам вопрос верстки, думаю ясно понятен на картинке (см. ниже), т.е. в обоих частях разделенной ячейки - должны находиться 2-а разных элемента с текстом (span, p, h что угодно), при этом при растяжении родительской ячейки (что это будет - div, table, table-cell - тоже не суть главное чтобы работал) текст соответственно должен "плыть" и "подстраиваться" под свою треугольную ячейку.

Вопрос: как я понимаю, с помощью CSS, и даже CSS3 этого не решишь (блоки пока только прямоугольные), (или я ошибаюсь? и все таки возможно?) каким образом возможно решить данную задачу? (просто идею) flash/js/jquery/html5 - ?

——-

Я лично (как один из вариантов на скриптах) вижу это примерно так: в треугольную ячейку помящаются 5 span-ов/p-араграфов (см. рис. потому что в нее влазиют 5 строк), скрипт работает с передаваемой строкой (всего заголовка) проверяет ширину <p1> (первой, самой верхней строки), вставляет текст (который вмещается в эту ширину, в словах разделенными пробелами), удаляет присвоенную подстроку из исходной строки, и идет дальше, пока не заполнит ячейку полностью.

Edited November 11, 2010 by novicheG

[ZI DAN]

Можно, конечно, попробовать на js строить span'ы, div'ы или ещё что-нибудь и нарезать в них текст. Но, скорее всего, реализация получиться сильно глюченой. Я бы не стал даже пытаться. Лучше отказаться от левой реализации с треугольниками и построить таблицу по ГОСТу.

Например:

вместо

Edited November 11, 2010 by ZI DAN

[rus]

сделать то можно что-то типа этого, но работать будет не везде.

[psywalker]

novicheG

Дружище, если всё же решишь эту задачу, сделай плиз отдельный пример на отдельной странице и дай заценить.

[novicheG]

Я бы не стал даже пытаться. Лучше отказаться от левой реализации с треугольниками и построить таблицу по ГОСТу.

Да допустим, я делаю отдельный один прямоугольный блок (вместо нескольких плавающих) с максимальной полощадью, (при этом нужно будет высчитывать кратную line-height высоту - для оптимального вмещения текста), И здесь 2-е заморочки: 1) что если текст там динамический, как при этом будет вести себя ячейка 2) Проблема с диагональной линией - как ее реализовать? тянуть картинку по вертикали/горизонтали - наглядно будет сильно ухудшаться качество, хотя возможно это с помощью svg обойти (к чему я склоняюсь). - Я просто к тому что скорее всего, то на то и выйдет