Здравствуйте, a_gand, Вы писали:
_>Есть вопрос: при использовании в таблице colspan получается странная штука с покраской.
_>В первой строке таблицы покраска работает правильно, а во второй style="background-color:#00ff00" почему то не срабатывает.
by design.
если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть.
Здравствуйте, c-smile, Вы писали:
CS>by design. CS>если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть.
Так ведь тут же colspan. А вобще логично брать фон левой верхней (внимание жопа, правой верхней в RTL) ячейки.
Здравствуйте, c-smile, Вы писали:
CS>если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть.
Не понял в чем проблема. Я правильно понимаю, что tr background рисуется под теми td, которые не указали свой background?
Ну так это, имхо, произвольно обобщается на произвольные расположения td. Ведь td всегда принадлежит ровно одному tr — тому, в который он вставлен. И точно так же он входит только в один col/сolgroup. Да, можно придумать ситуацию, в которой это будет выглядеть странно:
Но в большинстве практически полезных случаев направление спаннинга будет в точности совпадать с направлением стайлинга. Т.е. rowspanned cells будут использовать стили из col, а сolspanned cells — из tr, как в примере Романа. В таких случаях тупой алгоритм будет работать вполне предсказуемым и логичным образом.
... << RSDN@Home 1.2.0 alpha rev. 677>>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Здравствуйте, Sinclair, Вы писали:
S>Здравствуйте, c-smile, Вы писали:
CS>>если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть. S>Не понял в чем проблема. Я правильно понимаю, что tr background рисуется под теми td, которые не указали свой background?
Нет, неправильно. <tr> это блочный элемент, его высота — от пред. <tr> до следующего. Rows не перекрываются. Ячейки — да, могут.
все что я могу сделать так это нарисовать зеленую полосу на втором row. Мне не сложно. В конце концов каждый себе Буратина.
Проблема в том что (насколько я помню) IE или FF ничего не рисуют для tr. Но <td> наследуют некоторые стили от tr — например background.
У меня тоже так было но народ попросил <tr> с градиентом на background...
И еще одна проблема с оптимизацией перерисовок в grid... помнится там какая-то засада была.
Здравствуйте, c-smile, Вы писали:
CS>Нет, неправильно. <tr> это блочный элемент, его высота — от пред. <tr> до следующего. Rows не перекрываются.
Ага, теперь понятно. А как достигается эффект отсутствия background в промежутках между ячейками? Во что красится cell-spacing?
CS>все что я могу сделать так это нарисовать зеленую полосу на втором row. Мне не сложно. В конце концов каждый себе Буратина.
CS>Проблема в том что (насколько я помню) IE или FF ничего не рисуют для tr. CS> Но <td> наследуют некоторые стили от tr — например background.
Совершенно верно. В классике таблицы устроены достаточно неожиданным образом — элементы tr и col — не визуальные, а контейнерные. Имхо, весьма наркоманская реализация. Но я вообще никогда в жизни не видел вменяемой модели таблиц. Тот же ексель регулярно встревает с тем, что border считается свойством ячейки, но принадлежит сразу двум ячейкам.
CS>У меня тоже так было но народ попросил <tr> с градиентом на background...
То, что ты придумал, скорее всего — правильное решение.
Но хочется его обобщить на более общий случай. Скажем, я бы предполагал, что бэкграунд у TD должен себя вести так, как если бы он наследовался от TR, но с соответственно сдвинутой origin point. Я понятно выражаюсь? Вот адский скриншот: CS>И еще одна проблема с оптимизацией перерисовок в grid... помнится там какая-то засада была.
А, ну тут конечно может быть.
... << RSDN@Home 1.2.0 alpha rev. 677>>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Здравствуйте, c-smile, Вы писали:
CS>Здравствуйте, a_gand, Вы писали:
_>>Есть вопрос: при использовании в таблице colspan получается странная штука с покраской.
_>>В первой строке таблицы покраска работает правильно, а во второй style="background-color:#00ff00" почему то не срабатывает.
CS>by design.
CS>если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть.
На сколько я понимаю, группировка в таблице идёт по строкам. В случае с rowspan она действительно нарушается и не ясно как рисовать, но в случае с colspan (без rowspan) <td> шки остаются внутри одной строки и в этом случае возможно логичнее было бы оставлять покраску как и без colspan'ов.
Здравствуйте, Sinclair, Вы писали:
CS>>У меня тоже так было но народ попросил <tr> с градиентом на background... S>То, что ты придумал, скорее всего — правильное решение. S>Но хочется его обобщить на более общий случай. Скажем, я бы предполагал, что бэкграунд у TD должен себя вести так, как если бы он наследовался от TR, но с соответственно сдвинутой origin point. Я понятно выражаюсь? Вот адский скриншот: S>
Это таки да, адский скриншот. В смысле работать не будет.
Если считать <tr> как обычный display:block элемент то его border box не может включать <td rowspan=2> полностью. td как бы в position:relative модели — лежат поверх своего row и может быть следующих (если они с rowspan=2).
Поэтому градиент на <tr> будет именно вписан в border box <tr> а не в outline box всех его children.
Здравствуйте, a_gand, Вы писали:
CS>>если в tr нет spanned cells то background рисуется. Если есть spanned cells то не ясно как рисовать скажем <tr background...><td rowspan=5></tr>. Если есть идеи то готов их рассмотреть.
_>На сколько я понимаю, группировка в таблице идёт по строкам. В случае с rowspan она действительно нарушается и не ясно как рисовать, но в случае с colspan (без rowspan) <td> шки остаются внутри одной строки и в этом случае возможно логичнее было бы оставлять покраску как и без colspan'ов.
Здравствуйте, c-smile, Вы писали:
CS>Это таки да, адский скриншот. В смысле работать не будет.
Это я понимаю. Скриншот приведен как образец ментальной модели — того, как верстальщик ожидает увидеть результат разметки. CS>Если считать <tr> как обычный display:block элемент то его border box не может включать <td rowspan=2> полностью. td как бы в position:relative модели — лежат поверх своего row и может быть следующих (если они с rowspan=2). CS>Поэтому градиент на <tr> будет именно вписан в border box <tr> а не в outline box всех его children.
Интереснее придумать такую модель рендеринга, которая будет совместима с ментальной моделью. То, что ты описываешь — это когда градиент реально является частью бэкграунда TR. Я говорю о случае, когда бэкграунд на самом деле только у TD, а задание бэкграунда у TR всего лишь помогает TD наследовать его правильным (т.е. согласованным) образом.
Типа если бы в качестве background выступала большая картинка, то разные TD показывали бы ее разные части — так, как будто они дырки в листе непрозрачной бумаги, за которым собственно картинка и лежит.
Этого эффекта можно добиться и вручную, при помощи background-position, но это неудобно, особенно для "резиновых" клеток.
... << RSDN@Home 1.2.0 alpha rev. 677>>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Здравствуйте, Sinclair, Вы писали:
S>Интереснее придумать такую модель рендеринга, которая будет совместима с ментальной моделью. То, что ты описываешь — это когда градиент реально является частью бэкграунда TR. Я говорю о случае, когда бэкграунд на самом деле только у TD, а задание бэкграунда у TR всего лишь помогает TD наследовать его правильным (т.е. согласованным) образом. S>Типа если бы в качестве background выступала большая картинка, то разные TD показывали бы ее разные части — так, как будто они дырки в листе непрозрачной бумаги, за которым собственно картинка и лежит.
Полностью согласен с Антоном. Подобное поведение обратно совместимо с текущим и гораздо более логично, чем текущее.
Здравствуйте, Sinclair, Вы писали:
S>Здравствуйте, c-smile, Вы писали:
CS>>Это таки да, адский скриншот. В смысле работать не будет. S>Это я понимаю. Скриншот приведен как образец ментальной модели — того, как верстальщик ожидает увидеть результат разметки. CS>>Если считать <tr> как обычный display:block элемент то его border box не может включать <td rowspan=2> полностью. td как бы в position:relative модели — лежат поверх своего row и может быть следующих (если они с rowspan=2). CS>>Поэтому градиент на <tr> будет именно вписан в border box <tr> а не в outline box всех его children. S>Интереснее придумать такую модель рендеринга, которая будет совместима с ментальной моделью. То, что ты описываешь — это когда градиент реально является частью бэкграунда TR. Я говорю о случае, когда бэкграунд на самом деле только у TD, а задание бэкграунда у TR всего лишь помогает TD наследовать его правильным (т.е. согласованным) образом.
Технически можно реализовать и твою ментальную модель. Можно и мою.
Вопрос как я понимаю лишь в введении CSS атрибута
mental-model: sinclair | c-smile | joe-the-plumber;
S>Типа если бы в качестве background выступала большая картинка, то разные TD показывали бы ее разные части — так, как будто они дырки в листе непрозрачной бумаги, за которым собственно картинка и лежит.
S>Этого эффекта можно добиться и вручную, при помощи background-position, но это неудобно, особенно для "резиновых" клеток.
А вот это уже абсолютно реально.
Есть такой атрибут: background-attachment. Который принимает два значения: scroll и fixed.
Давай к нему добавим еще одно значение, скажем 'parent'
Таким образом эту картинку
можно получить описав след. стили:
Здравствуйте, c-smile, Вы писали: CS>Давай к нему добавим еще одно значение, скажем 'parent' CS>Таким образом эту картинку CS>можно получить описав след. стили: CS>Eh?
Прекрасно. Имхо, это даст всё, что в принципе нужно.
Есть только пара уточняющих вопросов (прости, я не очень хорошо знаком с твоим движком) про масштабирование бэкграундов.
1. Градиенты у тебя реализованы через картинки/SVG или есть специальный тип brush для таких случаев?
2. Каким способом достичь правильной растяжки фоновой картинки (в обычных браузерах никак)?
То есть мучает вопрос про то, как гарантировать, что если градиент от синего к белому, то верхняя точка жертвы — синяя, а нижняя — белая.
Просто с этим как раз будет связан вопрос про то, как именно красить адскую картинку. Дело в том, что если у нас вертикальный градиент для TD высотой в 20px, то возникает вопрос, какого цвета будет 20й сверху пиксел у TD rowspan=2. Есть два варианта: либо градиент равномерно растянется на всю высоту TD (с учетом начала координат, заданного background-attachment: parent) и эта точка будет голубой, либо stretch будет таким же, как и для всех (исходя из высоты TR), и 20й пиксел, как и все ниже него, будут белыми.
Второй вариант мне нравится больше.
... << RSDN@Home 1.2.0 alpha rev. 677>>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Здравствуйте, Sinclair, Вы писали:
S>Здравствуйте, c-smile, Вы писали: CS>>Давай к нему добавим еще одно значение, скажем 'parent' CS>>Таким образом эту картинку CS>>можно получить описав след. стили: CS>>Eh? S>Прекрасно. Имхо, это даст всё, что в принципе нужно. S>Есть только пара уточняющих вопросов (прости, я не очень хорошо знаком с твоим движком) про масштабирование бэкграундов. S>1. Градиенты у тебя реализованы через картинки/SVG или есть специальный тип brush для таких случаев?
градиент сделан сейчас как
background-color: color1 [color2 color3 color4]; — цвета в углах padding box.
S>2. Каким способом достичь правильной растяжки фоновой картинки (в обычных браузерах никак)?
Ммм... ты не про background-size ( здесь ) часом?
S>То есть мучает вопрос про то, как гарантировать, что если градиент от синего к белому, то верхняя точка жертвы — синяя, а нижняя — белая.
то допустив что background-size: 100% в случае background-attachment:parent это размеры parent (вот такая моя ментальность)
получим то что в принципе тебе надо.
S>Просто с этим как раз будет связан вопрос про то, как именно красить адскую картинку. Дело в том, что если у нас вертикальный градиент для TD высотой в 20px, то возникает вопрос, какого цвета будет 20й сверху пиксел у TD rowspan=2. Есть два варианта: либо градиент равномерно растянется на всю высоту TD (с учетом начала координат, заданного background-attachment: parent) и эта точка будет голубой, либо stretch будет таким же, как и для всех (исходя из высоты TR), и 20й пиксел, как и все ниже него, будут белыми. S>Второй вариант мне нравится больше.
Я так понимаю ты говоришь о трех опциях для TD rowspan=2 и его siblings:
1)
background-size: 100% 200%; // растягиваем градиент на два row (по вертикали). по горизонтали — на ширину row.
2)
background-size: 100% auto; // растягиваем градиент только по горизонтали.
3)
background-size: 100% 100%; // растягиваем на один row.
background-repeat: no-repeat; //
background-color: white; // все остальное делаем белым.
Здравствуйте, c-smile, Вы писали: CS>градиент сделан сейчас как CS>background-color: color1 [color2 color3 color4]; — цвета в углах padding box.
Ага. Вот как раз это и имелось в виду. Тогда при background-attachment: parent для расчета градиента должен браться padding box tr-а. S>>2. Каким способом достичь правильной растяжки фоновой картинки (в обычных браузерах никак)? CS>Ммм... ты не про background-size ( здесь ) часом?
Типа того. S>>То есть мучает вопрос про то, как гарантировать, что если градиент от синего к белому, то верхняя точка жертвы — синяя, а нижняя — белая. CS>в принципе если написать такое: CS>
CS>то допустив что background-size: 100% в случае background-attachment:parent это размеры parent (вот такая моя ментальность) CS>получим то что в принципе тебе надо.
CS>Я так понимаю ты говоришь о трех опциях для TD rowspan=2 и его siblings: CS>1) CS>background-size: 100% 200%; // растягиваем градиент на два row (по вертикали). по горизонтали — на ширину row.
CS>2) CS>background-size: 100% auto; // растягиваем градиент только по горизонтали.
CS>3) CS>background-size: 100% 100%; // растягиваем на один row. CS>background-repeat: no-repeat; // CS>background-color: white; // все остальное делаем белым.
Совершенно верно. Именно этого щастя и хочется. Номер 1 работал бы, если бы не приводил к странностям в отображении td с различным rowspan. Для градиентов будет работать решение №3.
... << RSDN@Home 1.2.0 alpha rev. 677>>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
