Показаны сообщения с ярлыком css. Показать все сообщения
Показаны сообщения с ярлыком css. Показать все сообщения

3.3.14

Таблица соотношений px, pt, em %

Пункт, pt Пиксель, px Единица, em Процент,%
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
Немного теории:
Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т. д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Как показала практика, использование em или % удобнее чем пункты и пиксели.
link

10.1.14

Устанавливаем в tinymce русский язык

http://adminway.ru/ustanavlivaem-russkii-tinymce-v-textpattern

TinyMCE – это очень навороченный WYSIWYG-редактор, который можно установить достаточно легко на любую html-форму textarea. Лично я устанавливал этот редактор на несколько своих сайтов в форму ввода комментариев, так как TinyMCE реально может помочь вашим посетителям в написании новых комментариев.
В TXP есть Textile, но так как он мало где распространен, его среднестатистический пользователь не знает и в ваших комментариях соответственно использовать не будет.
А этот самый TinyMCE делает процесс написания комментария простым и быстрым, используя графический интерфейс.

Почему именно TinyMCE?

Этот WYSIWYG-редактор обладает несколькими неподкупными достоинствами, к которым можно отнести:
  • широкий функционал;
  • русский язык;
  • простая установка;
  • гибкая настройка панели редактора.

Устанавливаем TinyMCE в Textpattern

Простая установка TinyMCE в Textpattern заключается в всего лишь в нескольких несложных действиях, которые необходимо выполнять по порядку:
  1. Загружаем последнюю версию TinyMCE с официального сайта.
  2. Загружаем пакет русификации с того же сайта. Тут нужно выбрать какие языки нужны и нажать на DOWNLOAD.
  3. Далее необходимо поместить последнюю версию TinyMCE на свой хостинг, где размещен сайт. По умолчанию разработчики предлагают размещать все в директории /js/tiny_mce, но Вы может куда угодно его засунуть.
  4. После этого необходимо “накатить” на все это русификацию, которая была на втором шаге. Прямо скопировать поверх всех загруженных файлов.
  5. После этого добавляем небольшой html-код на страницу сайта. Главное, чтобы этот код был выше формы, на которую нужно добавить TinyMCE. Сам код:


    В этом коде необходимо указать путь до файла tiny_mce.js.
    В строке:
    theme:“simple”
    указываем тему. По умолчанию используется advanced, которая имеет на панели абсолютно все значки. Есть и простая simple, в которой нет ничего лишнего. Вот последнюю и рекомендуется использоваться.
    Строка:
    language:“ru”
    говорит, что использоваться будет русский язык.
На этом все!! TinyMCE установлен на всех формах ниже.

Небольшие доработки из личного опыта

Меня дико раздражало, что этот самый TinyMCE иногда начинает вставлять мусорный html-код, пытаясь насильно указать шрифт и кегль шрифта. Закономерности я в этом никакой не нашел, но зато нашел решение этой проблемы.
Решение оказалось простым. Нужно просто удалить или закомментировать две строчки в CSS-файле установленной темы. Так как тема установлена simple, то CSS-файл будет вот этот: /tiny_mce/themes/simple/skins/default/content.css.
В нем нужно удалить вот этот блок:
body, td, pre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
И мусор уйдет.