Есть ли хук для реализации выравнивания по символу в таблцах?

[Быколай]

Добрый день.

Очень жаль, что такой важный приём для правильной и читабельной вёрстки как выравнивание по символу, не прижился в html. Для 4-ой версии стандарта он так и не получил поддержку ни одного из браузеров, а в 5-ой и вовсе был выкинут из спеки.

Может кто знает какой-нибудь трюк? В яндексе ничего найти не удалось, к сожалению. Может скриптовое решение есть готовое? В принципе представляю как это реализовать на jQuery, но прежде чем громоздить велосипед, хотелось бы попросить у многоуважаемого сообщества консультации по данному вопросу.

PS: опечатался в на названии темы,

Edited December 7, 2012 by Быколай

[wwt]

Наверное самый лучший вариант эмулировать с помощью js.

[wwt]

пфф протупил , все бросаю пить

Edited December 7, 2012 by wwt

[Николя223]

если искать то только на буржуйских ресурсах... на руских - не нашёл.

вот, но что то мне подсказывает, что это не подойдёт, не эмуляция точно не подойдёт

Edited December 7, 2012 by Николя223

[Быколай]

wwt, на самом деле кроме js никак видимо и не решить.

Николя223, чёт не то. То есть по описанию то, но не завелось. С утра котелок ещё не проснулся у меня, но судя по коду, там адово сложно реализовано. Имхо реализация может быть проще, без css-мудрёностей.

псевдо-алгоритм :

//в инициализации указываем массив вида {№ колонки, символ, макс. кол-во целых цифр, и макс. кол-во цифр после запятой}. 

цикл 1 по всем строкам tbody:
   цикл 2 по всем ячейкам строки:
     считаем кол-во символов до char, добиваем спереди  
     считаем кол-во после запятой, дополняем  
   конец цикла 2
конец цикла 1

профит
конец. 

подумал, нафиг привязывать костыль именно к гоп-компании col @align @char @charset, они в html 5 невалидны, лучше в виде отдельного плагина jQ или функции js. К тому же это сложнее

на бумаге всё гладко, кажись. Пока.

PS: забыл про ширину символов. надо обмозговать.

Edited December 10, 2012 by Быколай

[Быколай]

Насчёт символов дробной части, это я погнал всё проще, достаточно добивать целую часть пробелами спереди, и выравнивать по левому краю.

И ещё, чтобы не морочиться с разной шириной символов font-family: monospace;

Вот пока так получается:

http://jsfiddle.net/samizdam/dy3mb/10/

Буду рад критике и предложениям. Потестил в последних браузерах, кажется вполне кросс получилось.

[wwt]

Попробовал реализовать без подстановок пробелов. http://jsfiddle.net/wwt999/gatpT/

На примере работает, как будет себя вести в живых проектах фз.

Edited December 10, 2012 by wwt

[Быколай]

Попробовал реализовать без подстановок пробелов. http://jsfiddle.net/wwt999/gatpT/

На примере работает, как будет себя вести в живых проектах фз.

хм, оригинально. только как правило выравнивание по символу в таблицах требуется.

[wwt]

Попробовал реализовать без подстановок пробелов. http://jsfiddle.net/wwt999/gatpT/

На примере работает, как будет себя вести в живых проектах фз.

хм, оригинально. только как правило выравнивание по символу в таблицах требуется.

та я знаю. С таблицей тож потестил, в принципе отличий почти нет, единственное при ресайзе нуна фиксить. Но с пробелами все таки надежнее. Хотя и там и там это такие грабли.

[Николя223]

Я сначала забить хотел, но тяга к преодолению непонимания взяла своё)))

Пошёл немного другим путём, и если я правильно понял задачу - оцените)) единтсвенно - не кроссбраузерно))

http://jsfiddle.net/NjXhN/

Проверил в IE 9 - работает, ниже - не хочет, проблемка возникает с getElementsByTagName

Edited December 10, 2012 by Николя223

[wwt]

Я сначала забить хотел, но тяга к преодолению непонимания взяла своё)))

Пошёл немного другим путём, и если я правильно понял задачу - оцените)) единтсвенно - не кроссбраузерно))

http://jsfiddle.net/NjXhN/

Проверил в IE 9 - работает, ниже - не хочет, проблемка возникает с getElementsByTagName

Тож думал о таком варианте. Но плавающие блоки могут наплывать друг на друга при ресайзе таблицы. А вообще жизнеспособный вариант. Всякие кодмирроры тоже разбивают строки на части для форматирования.

Edited December 11, 2012 by wwt

[Николя223]

Я сначала забить хотел, но тяга к преодолению непонимания взяла своё)))

Пошёл немного другим путём, и если я правильно понял задачу - оцените)) единтсвенно - не кроссбраузерно))

http://jsfiddle.net/NjXhN/

Проверил в IE 9 - работает, ниже - не хочет, проблемка возникает с getElementsByTagName

Тож думал о таком варианте. Но плавающие блоки могут наплывать друг на друга при ресайзе таблицы. А вообще жизнеспособный вариант. Всякие кодмирроры тоже разбивают строки на части для форматирования.

Мне уже после того как пост написал, также идея пришла, что Jquery позволит обойти сие моменты, но времени нет пока что свободного)) если понадобится кому нибудь - конечно допилю))) главное что мы привели ряд решений по интересному вопросу)) align="char" - уже нет, а решения теперь есть)) лично мне понравилась задачка)) если кто гуглить будет, обязательно наткнется на эту темку

[Быколай]

Николя223, wwt, спасибо за участие. Продолжу тему Оформил в виде плагина. Исходный код: http://jsfiddle.net/samizdam/GL9eK/

Использовать можно следующим образом: для каждой колонки указываются опции выравнивания. Опции следующие:

        cols: 'n1+1', // номер колонки, допустимо выражение для :nth-child(), по умолчанию все
        use_char: ',', // символ для выравнивания
        left_offset: 3, // кол-во пробелов добиваемых слева (минимум — кол-во знаков целой части в наибольшем значении)
        right_offset: 2, // кол-во знаков в дробной части по умолчанию
        exclude_cells : 0 // TODO! номера ячеек для которых не проволить преобразование (напр. с текстом и т.п.) :nth-of-type() совместимое выражение

Вроде бы всё работает, только я завяз на exclude_cells — вроде нагуглил хак который добавляет поддержку nth-of-type в jQuery, но не догоняю как применить

Буду рад критике и пожеланиям. Может кто подскажет как nth-of-type допилить?

PS: В последнее время редко приходиться браться за подобные вещи, теряю навык, так что не обессудьте

[wwt]

есть плагин для расширения селекторов в jquery http://www.keithclark.co.uk/labs/jquery-extended-selectors/ и nth-of-type в том числе, может оттуда дернуть.

[Быколай]

есть плагин для расширения селекторов в jquery http://www.keithclark.co.uk/labs/jquery-extended-selectors/ и nth-of-type в том числе, может оттуда дернуть.

спасибо за наводку, не знал про этот плагин. Вот выдернул из него нужное:

http://jsfiddle.net/samizdam/GL9eK/9/

А чуда не происходит — не понимаю как составить выражение, которое бы отфильтровало элементы.

1. получили ячейки колонки

var tds = $(this).find('tbody tr td:nth-child('+options.cols+')

2. пробую отбросить по номеру исключаемые ячейки:

tds = tds.filter(':not(:nth-of-type('+options.exclude_cells+'))');

В общем надо очевидно filter и not использовать, но не понимаю как