Как я могу добиться идеального позиционирования пикселей и расстояния между текстовыми элементами в браузерах?

Question

Как я могу добиться идеального позиционирования пикселей и расстояния между текстовыми элементами в браузерах?

Прямо сейчас мы пытаемся добиться последовательного форматирования textarea элементы, через Safari/Chrome/Firefox/IE на Mac и Windows. Я полагаю, что это может быть кроличья нора, поскольку любая их комбинация может привести к форматированию немного по-другому - может быть, одна комбинация добавляет немного отступа к div здесь не так, как другие, другая - разбивает многострочный текст по-другому, чем остальные и так далее.

Вместо того, чтобы использовать textarea (или же div), можем ли мы достичь идеального позиционирования с помощью HTML5 canvas? Или используя библиотеку Raphael JavaScript? Или, может быть, какая-то другая библиотека JS?

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

(Я бы предпочел избегать решений на основе Flash на данный момент, если только это не единственное решение...)

1

html5 cross-browser text-rendering pixel-perfect

Источник

user161161 09 авг '11 в 02:12

5 ответов

Другие вопросы по тегам html5 cross-browser text-rendering pixel-perfect

user27862 09 авг '11 в 03:29 2011-08-09 03:29 · Answer 1 · 2011-08-09 03:29

Отправьте текст на сервер, попросите сервер отобразить изображение, отобразить изображение. Вуаля.

3

Источник

user27862 09 авг '11 в 03:29

user755645 09 авг '11 в 03:21 2011-08-09 03:21 · Answer 2 · 2011-08-09 03:21

Я бы сказал, что это почти невозможно.

Я бы также сказал, что нет оснований для идеального разрешения пикселей во всех браузерах, поскольку подавляющее большинство посетителей просматривает ваш сайт только с помощью одного браузера. А те, кто посещает ваш сайт более чем в одном браузере (скажем, на работе и дома), вряд ли заметят элементы, которые имеют несколько пикселей или имеют немного разные цвета границ.

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

Тем не менее, вот большой список textarea хитрости: http://css-tricks.com/6841-textarea-tricks/

user816620 09 авг '11 в 02:21 2011-08-09 02:21 · Answer 3 · 2011-08-09 02:21

Одна из основных причин, по которой существует PDF, заключается в том, что браузеры имеют формат, не идентичный пикселям, а формат PDF. Между прочим, даже гарнитуры не гарантируются одинаковыми от одной ОС / браузера к другой.

Даже если вы не позволите браузеру позиционировать что-либо, и вы делаете все свое позиционирование на уровне пикселей, вам все равно не обязательно будут работать те же шрифты. Если вы позволите браузеру позиционировать что-либо, то у вас могут быть варианты.

user638329 09 авг '11 в 02:17 2011-08-09 02:17 · Answer 4 · 2011-08-09 02:17

Было бы одно решение начать ваш CSS с чистого листа? Дать всем известный дефолт?

Например, я запускаю свои CSS-файлы следующим образом, поэтому всегда знаю, чего ожидать:

*{
margin:0;
padding:0;
}

Это то, что вы ищете? Точно так же вы можете изменить "*" на "textarea".

0

Источник

user638329 09 авг '11 в 02:17

user811240 09 авг '11 в 02:18 2011-08-09 02:18 · Answer 5 · 2011-08-09 02:18

Я не уверен, возможно ли это, однако одна вещь, на которую вы можете обратить внимание, - это использование панели инструментов веб-разработчика для Firefox или надстройки веб-разработчика для Chrome. Существует возможность отключить стили браузера по умолчанию. Проверьте это, а затем стиль все. Границы, тип границы, все поля, отступы, цвета фона и т. Д. Затем снова включите стили браузера по умолчанию и убедитесь, что они выглядят одинаково. Если нет, вымойте, сполосните и повторите.

Кроме того, если шрифты играют определенную роль, вам придется встраивать их в страницу, поскольку в некоторых операционных системах может не быть установлен определенный шрифт.