Html lang


RFC 3066 gives the details of the allowed values (emphasis and links added):

All 2-letter subtags are interpreted as ISO 3166 alpha-2 country codes from [ISO 3166], or subsequently assigned by the ISO 3166 maintenance agency or governing standardization bodies, denoting the area to which this language variant relates.

I interpret that as meaning any valid (according to ISO 3166) 2-letter code is valid as a subtag. The RFC goes on to state:

Tags with second subtags of 3 to 8 letters may be registered with IANA, according to the rules in chapter 5 of this document.

By the way, that looks like a typo, since chapter 3 seems to relate to the the registration process, not chapter 5.

A quick search for the IANA registry reveals a very long list, of all the available language subtags. Here’s one example from the list (which would be used as en-scouse):

Type: variant

Subtag: scouse

Description: Scouse

Added: 2006-09-18

Prefix: en

Comments: English Liverpudlian dialect known as ‘Scouse’

There are all sorts of subtags available; a quick scroll has already revealed fr-1694acad


(17th century French).


The usefulness of some of these (I would say the vast majority of these) tags, when it comes to documents designed for display in the browser, is limited. The W3C Internationalization specification simply states:

Browsers and other applications can use information about the language of content to deliver to users the most appropriate information, or to present information to users in the most appropriate way. The more content is tagged and tagged correctly, the more useful and pervasive such applications will become.

I’m struggling to find detailed information on how browsers behave when encountering different language tags, but they are most likely going to offer some benefit to those users who use a screen reader, which can use the tag to determine the language/dialect/accent in which to present the content.

stackoverflow.com

Привет Хабр!

image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.


В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Указатель на язык:

<html lang="ru-RU"> 

Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.

p {  -moz-hyphens: auto;  -webkit-hyphens: auto;  -ms-hyphens: auto;  hyphens: auto; } 

Убираем возможность масштабировать:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>   

Это особенно полезно на телефонах с операционкой Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также мы отключаем zoom, т.к. в приложениях обычно никакого зума нет.

Ещё один тег для вышеописанной проблемы:

<meta name="HandheldFriendly" content="True"/> 

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

Запрещаем кэшировать документ:

<meta http-equiv="Cache-Control" content="no-cache"/> 

Это помогает на некоторых девайсах избавиться от неадекватных попыток восстановления страницы. То есть попытки адекватные, но не все девайсы восстанавливают страницу без багов.

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:

<meta http-equiv="cleartype" content="on"/> 

Не забываем добавить картинки для Apple устройств:

<link rel="apple-touch-startup-image" href="images/startup.png"> <link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/> <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/> <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/>   

Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме:

<meta name="apple-mobile-web-app-capable" content="yes"/> 

Ну и корректируем верхнюю полоску в iPhone:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> 

Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:

<meta name="application-name" content="Title"/>  <meta name="msapplication-tooltip" content="Description"/> 

Дополнительная разметка для оформления ссылки на приложение в меню:

<meta name="msapplication-TileColor" content="#990000"/> <meta name="msapplication-TileImage" content="images/custom_icon_144.png"/> <meta name="msapplication-square70x70logo" content="images/custom_icon_70.png"/> <meta name="msapplication-square150x150logo" content="images/custom_icon_150.png"/> <meta name="msapplication-square310x310logo" content="images/custom_icon_310.png"/> <meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png"/>   

Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:

<meta name="msapplication-window" content="width=400;height=300"/> 

Просим IE переключиться в последний режим:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 

Отключаем панель работы с изображениями:

<meta http-equiv="imagetoolbar" content="no"/> 

Просим IE оформлять все в классическом стиле без учета текущей темы операционки:

<meta http-equiv="msthemecompatible" content="no"/> 

Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:

<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="address=no"/> 

Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.

Полный набор для SEO:

<title></title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="copyright" content="(c)">  <meta http-equiv="Reply-to" content="mail@yandex.ru">   

В последнее время про него тоже стали забывать, а ведь он может помочь, если приложение будет на каком-либо сайте online.

Обязательно скидываем стили по умолчанию:

<link href="css/reset.min.css" rel="stylesheet" type="text/css"/> 

Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR

Добавляем набор своих стандартных стилей:

<link href="css/default.css" rel="stylesheet" type="text/css"/> 

А в них учтены ещё некоторые нюансы. Например убираем выделение в CSS:

body {  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  -webkit-focus-ring-color: rgba(255, 255, 255, 0);  outline: none; 	  -moz-user-select: none;  -o-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  user-select: none;  resize: none;   -webkit-text-size-adjust: none; } 

Но оставляем его для полей ввода текста:

input, textarea {  -moz-user-select: text;  -o-user-select: text;  -khtml-user-select: text;  -webkit-user-select: text;  user-select: text;  resize: none; }   

Ещё раз напомню, что в основном я пишу веб-приложения, в которых пользователь ничего выделять не должен. На обычном сайте запрещать выделение текста нельзя.

Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:

img {  border: 0;  vertical-align: top; } 

Ещё у меня хранится стандартный класс анимации, чтобы «мозолить глаза»:

.animation {  -webkit-transition: background-color 0.7s, color 1s, opacity 0.5s;  -ms-transition: background-color 0.7s, color 1s, opacity 0.5s;  -o-transition: background-color 0.7s, color 1s, opacity 0.5s;  -moz-transition: background-color 0.7s, color 1s, opacity 0.5s;  transition: background-color 0.7s, color 1s, opacity 0.5s; } 

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

А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:

<noscript class="no_script_message">  У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript. </noscript>   

Ну и конечно, ради любимого IE в самом начале добавим:

<!-- saved from url=(0014)about:internet --> 

Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS

Ну и стили для портретной и альбомной ориентации:

<link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> <link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/> 

Если будете переводить в HTA, есть такая вставка:

<!-- Option for HTA file 	<hta:application id=ifree.game.sudoku 		applicationName=Sudoku 		showInTaskBar=yes 		caption=yes 		innerBorder=yes 		selection=no 		icon=images/favicon.ico 		sysMenu=yes 		windowState=normal 		scroll=no 		resize=no 		navigable=no 		contextmenu=yes /> 		--> 

Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):

<script src="js/hta.js"></script> 

Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).

Ну а с этим наверное уже знакомы?

<script src="js/html5.js"></script> 

Бежим по новым тегам HTML5 и пересоздаем их для старых IE.

Ну и прокачиваем Android

<script src="js/android.js"></script> 

Например, убираем у них адресную строку. Для этого:

  • Берем высоту страницы и увеличиваем её на два
  • Скроллим вверх до 1px сверху
  • Возвращаем высоту в исходное положение

Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.

Просим закэшировать приложение для offline работы, если это возможно:

<html manifest="default.appcache"> 

Там выше ещё про переносы и язык было, поэтому полный тег такой:

<html manifest="default.appcache" lang="ru-RU"> 

Как выглядит input обычного человека:

<input type="text" id="name"> 

Как выглядит input курильщика:

<input type="text" autocomplete="on" spellcheck="true" autocapitalize="off" autocorrect="off" autofocus required  maxlength="30" pattern="^[А-Яа-яs-_0-9]+$" class="input_name" id="input_name" placeholder="Иван Иванович"  x-webkit-speech /> 

Атрибуты элемента:


  • placeholder — подсказка для ввода
  • maxlength — ограничение количества вводимых символов
  • spellcheck — проверка правописания
  • autocorrect — автоматическое корректировка написанного
  • autocapitalize — автоматическое преобразование регистра
  • x-webkit-speech — голосовой ввод

Требования к элементу:

  • Тип элемента должен соответствовать типу вводимых данных. Если это поле ввода пароля, оно должно иметь тип password. Вводимые символы при этом должны заменяться звездочками.
  • Элемент должен сопровождаться примером того, какие данные требуется ввести.
  • Элемент должен подсказывать пользователю данные для ввода на лету.
  • Элемент должен проверять орфографические ошибки.
  • Максимальная длина ввода должна быть ограничена.
  • Если это поле ввода нового пароля, необходимо добавить кнопку «авто-генерация пароля». При нажатие на которую генерируется случайный пароль.
  • Элемент должен содержать атрибут pattern, указывающий на ожидаемый тип данных.
  • При работающем JavaScript, введенные пользователем данные обязательно должны проверяться на лету. Если данные не прошли проверку — необходимо немедленно уведомить об этом пользователя.

Рекомендации:

  • Если это поле ввода пароля, необходимо добавить кнопку «посмотреть пароль» (обычно оформляется в виде «глаза»), при нажатие на которую тип поля становится text, и пользователь может проверить введенные данные.
  • Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
  • В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.

Половину этих свойств можно переносить и на textarea. Тут и авто-дополнение, и проверка правописания, и голосовой ввод, подсказка, ограничение длины и т.д. Но есть ещё ряд дополнительных требований:

  • Изменение размера поля должно быть запрещено (resize: none в CSS)
  • Если это ввод некоего сообщения, необходимо информировать пользователя о том, сколько символов ему ещё можно ввести.

Замечания по верстке:

  • Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
  • Position — это опасно. Желательно ничего никуда не позиционировать.
  • Float — тоже к добру не приведет. Желательно вообще про него забыть.
  • В дизайне надо сразу предусмотреть возможность того, что тот или иной фрагмент может отвалиться. В этом плане идеален стиль Metro. Как-то даже пришла в голову мысль, что Microsoft специально сделала такой стиль, в котором нет ни круглых углов, ни градиентов, ни теней. То есть ребята сразу отталкивались от своего браузера, чтобы никто не мог обвинить их в багах.

Progressive Enhancement и Graceful Degradation

Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.

Что же ещё может понадобиться для стандартизации?

  • Расческа для CSS (http://csscomb.ru/online/) поможет всему принять единый вид.
  • Автопрефиксер Андрея Ситника поможет добить CSS-префиксы (http://habrahabr.ru/company/evilmartians/blog/176909/)
  • Вот такой скрипт (http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip) поможет нагенерировать кучу картинок (требует установленного imagemagick)

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

А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:

<!-- SEO schema --> <footer itemscope itemtype="http://schema.org/LocalBusiness">  ООО «<span itemprop="name">Google</span>»  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  <span itemprop="streetAddress">Ленина 1</span>  <span itemprop="addressLocality">Санкт-Петербург</span>,  <span itemprop="addressRegion">Ленинградская обл.</span>  <meta itemprop="addressCountry" content="RU"/>  </div>  Время работы менеджера-консультанта:  <time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa, Su 10:00-21:00">10:00 - 21:00 Ежедневно</time>  <span itemprop="telephone">206-555-1234</span>.  <span itemprop="email">info@wikimedia.org</span>.  <a href="http://www.google.com" itemprop="url">http://google.com</a>. </footer> 

С другой стороны, у всех поисковиков она есть в документации, но никто её не поддерживает. Я использую этот footer, т.к. мало ли, может в будущем начнут использовать.

Вот пожалуй и все. Тем кто осили — небольшой бонус:

image

В демке вы можете посмотреть все meta теги из статьи.

habr.com

RFC 3066 содержит сведения о допустимых значениях (выделение и ссылки добавлены):

Все двухбуквенные subtags интерпретируются как коды ISO 3166 alpha-2 от [ISO 3166], или впоследствии присвоенный службой ISO 3166 агентства или руководящих органов по стандартизации, обозначая область, в которую этот языковой вариант относится.

Я интерпретирую это как значение любого действительного (согласно ISO 3166) 2-буквенный код действителен как subtag. В RFC говорится:

Тэги со вторыми субтагами от 3 до 8 букв могут быть зарегистрированы с помощью IANA, согласно правилам главы 5 настоящего документа.

Кстати, это выглядит как опечатка, поскольку глава 3, похоже, относится к процессу регистрации, а не к главе 5.

Быстрый поиск реестра IANA показывает очень длинный список всех доступных языковых subtags. Вот один пример из списка (который будет использоваться как en-scouse):

Тип: вариант

Subtag: scouse

Описание: Scouse

Добавлено: 2006-09-18

Префикс: ru

Комментарии: Английский Ливерпульский диалект, известный как «Scouse»

Доступны всевозможные subtags; быстрый свиток уже показал fr-1694acad (французский 17-й век).


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

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

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

qaru.site

8.1 Задание языка содержимого: атрибут lang

Информация о языке, указанная с помощью атрибута lang, может использоваться агентом пользователя для управления генерацией изображения различными способами. Некоторые ситуации, в которых указываемая автором информация а языке, может быть полезна:

  • Помощь поисковым машинам
  • Помощь синтезаторам речи
  • Помощь агентам пользователей в выборе вариантов глифов для высококачественной типографии
  • Помощь агенту пользователя в выборе набора кавычек
  • Помощь агенту пользователя в вопросах переноса, лигатур и интервалов
  • Помощь программа проверки грамматики и орфографии

Атрибут lang указывает код содержимого элемента и значений атрибутов; относится ли он к данному атрибуту, зависит от синтаксиса и семантики атрибута и от операции.

Атрибут lang предназначен для того, чтобы позволить агентам пользователей более осмысленно генерировать изображение на основе принятой культурной практики для данного языка. Это не подразумевает, что агенты пользователей должны генерировать символы, не являющиеся типичными для конкретного языка, менее осмысленным способом; агенты пользователей должны пытаться сгенерировать се символы, независимо от значения, указанного в атрибуте lang.

8.1.1 Коды языков

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

В документе [RFC1766] определены и описаны все коды языков, которые должны использоваться в документах на языке HTML.

Кратко говоря, коды языков состоят из первичного кода и ряда подкодов, который может быть пустым:

  код-языка = первичный-код ( "-" подкод )* 

Двухбуквенные первичные коды зарезервированы для сокращений языков по стандарту [ISO639]. Сюда входят коды fr (французский), de (немецкий), it (итальянский), nl (голландский), el (греческий), es (испанский), pt (португальский), ar (арабский), he (иврит), ru (русский), zh (китайский), ja (японский), hi (хинди), ur (урду) и sa (санскрит).

Любой двухбуквенный подкод считается кодом страны в стандарте [ISO3166].

8.1.2 Наследование кодов языков

Элемент наследует информацию о коде языка в следующем порядке старшинства (от высшего к низшему):

  • Атрибут lang, установленный для самого элемента.
  • Самый близкий родительский элемент, для которого установлено значение атрибута lang (то есть атрибут lang наследуется).
  • Заголовок HTTP «Content-Language» (который может конфигурироваться на сервере). Например:
     Content-Language: en-cockney 
  • Значения по умолчанию и настройки агента пользователя.

8.1.3 Интерпретация кодов языков

В контексте HTML код языка должен интерпретироваться агентами пользователя как иерархия знаков, а не один знак. Если агент пользователя генерирует изображение в соответствии с информацией о языке (скажем, сравнивая языковые коды в таблицах стилей и значения атрибута lang), он всегда должен находить точное соответствие, но должен также принимать во внимание первичные коды. Таким образом, если значение атрибута lang «en-US» установлено для элемента HTML, агент пользователя должен сначала выбрать информацию о стиле, совпадающую с «en-US», а затем сгенерировать более общее значение «en».

8.2 Указание направления текста и таблиц: атрибут dir

Кроме задания языка документа с помощью атрибута lang, авторы могут указать основное направление (слева направо или справа налево) частей текста, таблицы и т.д. Это делается с помощью атрибута dir.

Спецификация [UNICODE] назначает направление символам и определяет (сложный) алгоритм для определения соответствующего направления текста. Если документ не содержит отображаемых справа налево символов, агент пользователя не должен использовать двунаправленный алгоритм [UNICODE]. Если документ содержит такие символы, и если агент пользователя и отображает, он должен использовать двунаправленный алгоритм.

Хотя в Unicode определены специальные символы, отвечающие за направление текста, HTML предлагает конструкции разметки высшего уровня, выполняющие те же функции: атрибут dir (не спутайте с элементом DIR) и элемент BDO. Таким образом, чтобы привести цитату на иврите, проще написать

 <Q lang="he" dir="rtl">...цитата на иврите...</Q> 

чем с эквивалентными ссылками Unicode:

 &#x202B;&#x05F4;...цитата на иврите...&#x05F4;&#x202C; 

Агенты пользователей не должны использовать атрибут lang для определения направления текста.

Атрибут dir наследуется, и его можно переопределить. Подробнее см. в разделе о наследовании информации о направлении текста.

8.2.1 Введение в двунаправленный алгоритм

В следующем примере проиллюстрировано ожидаемое поведение двунаправленного алгоритма. В нем показаны английский текст слева направо и текст на иврите справа налево.

8.2.2 Наследование информации о направлении текста

Для двунаправленного алгоритма Unicode необходимо основное направление текста для текстовых блоков. Чтобы указать основное направление элементов уровня блока, установите для этого элемента атрибута dir. Значением атрибута dir, устанавливаемым по умолчанию, является «ltr» (слева направо).

Если атрибут dir установлен для элемента уровня блока, он действует на протяжении всего элемента и для всех вложенных элементов уровня блока. Установка атрибута dir для вложенного элемента имеет приоритет по отношению к наследуемому значению.

Чтобы установить основное направление текста для всего документа, установите атрибут dir в элементе HTML.

Встроенные элементы, с другой стороны, не наследуют атрибут dir. Это означает, что встроенный элемент без атрибута dir не открывает дополнительного уровня внедрения в соответствии с двунаправленным алгоритмом. (Здесь элементом считается элемент уровня блока или встроенный элемент на основе представления по умолчанию. Помните, что элементы INS и DEL могут быть элементами уровня блока или встраиваемыми элементами в зависимости от контекста.)

8.2.3 Установка направления внедренного текста

Двунаправленный алгоритм [UNICODE] автоматически обращает последовательности внедренных символов в соответствии с наследуемым направлением (как показано в предыдущих примерах). Однако в общем в расчет принимается только один уровень внедрения. Для того, чтобы изменения направления достигали дополнительных уровней, используйте атрибут dir во встроенном элементе.

Авторы также могут использовать для изменения направления нескольких внедренных фрагментов символы Unicode. Для указания направления слева направо во внедряемом фрагменте окружите текст символами LEFT-TO-RIGHT EMBEDDING («LRE», шестнадцатеричный код 202A) и POP DIRECTIONAL FORMATTING («PDF», шестнадцатеричный код 202C). Для указания направления справа налево во внедряемом фрагменте окружите текст символами RIGHT-TO-LEFT EMBEDDING («RTE», шестнадцатеричный код 202B) и PDF.

8.2.4 Приоритет над двунаправленным алгоритмом: элемент BDO

Начальный тег: обязателен, Конечный тег: обязателен

Двунаправленного алгоритма и атрибута dir обычно достаточно для управления изменением направления внедренного текста. Однако в некоторых ситуациях двунаправленный алгоритм может привести к некорректному представлению. Элемент BDO позволяет авторам отключать двунаправленный алгоритм для выбранных фрагментов текста.

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

Авторы могут также использовать специальные символы Unicode для того, чтобы избежать использования двунаправленного алгоритма — LEFT-TO-RIGHT OVERRIDE (202D) или RIGHT-TO-LEFT OVERRIDE (шестнадцатеричный код 202E). Символ POP DIRECTIONAL FORMATTING (шестнадцатеричный код 202C) заканчивает любую последовательность, используемую для обхода двунаправленного алгоритма.

8.2.5 Ссылки на символы для управления направлением и объединением

Поскольку иногда возникает двусмысленность относительно некоторых символов (например, символов пунктуации), спецификация [UNICODE] включает символы для правильного определения назначения. Спецификация Unicode также включает некоторые символы для управления объединением при необходимости (например, в некоторых ситуациях с арабскими символами). HTML 4.0 включает для этих символов ссылки на символы.

Следующее DTD определяет представление некоторых объектов направления:

  <!ENTITY zwnj CDATA "&#8204;"--=нулевая ширина без объединения -->  <!ENTITY zwj CDATA "&#8205;"--=объединитель нулевой ширины-->  <!ENTITY lrm CDATA "&#8206;"--=метка слева направо-->  <!ENTITY rlm CDATA "&#8207;"--=метка справа налево--> 

Объект zwnj используется для блокировки объединения в тех контекстах, где объединение произойдет, но оно происходить не должно. Объект zwj имеет обратное действие; он производит объединение в случае, когда оно не предполагается, но должно произойти. Например, арабская буква «HEH» используется для сокращения «Hijri», названия исламской системы летоисчисления. Поскольку отдельный иероглиф «HEH» в арабской письменности выглядит как цифра пять, для того, чтобы не путать букву «HEH» с последней цифрой пять в годе, используется исходная форма буквы «HEH». Однако, нет последующего контекста (например, буквы для объединения), с которым можно объединить «HEH». Символ zwj предоставляет такой контекст.

Точно так же в персидских текстах буква может иногда объединяться с последующей буквой, в то время как в рукописном тексте этого быть не должно. Символ zwnj используется для блокировки объединения в таких случаях.

Символы порядка, lrm и rlm, используются для определения направления нейтральных по отношению к направлению символов. Например, если двойные кавычки ставятся между арабской (справа налево) и латинской (слева направо) буквами, направление кавычек неясно (относятся ли они к арабскому или к латинскому тексту?). Символы lrm и rlm имеют свойство направления, но не имеют свойств ширины и разделения слов/строк. Подробнее см. [UNICODE].

citforum.ru

html5_tumblr.jpg

Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с вами сверстаем базовый HTML5-шаблон.

400x3001.png

Начнём работу. Первое, что стоит прописать в новом документе — это DOCTYPE:

<! doctype html>

Сразу же бросаются в глаза длина написания и маленькие буквы. Так теперь можно. От регистра вообще ничего не зависит. В прежнем формате это выглядело примерно так:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Чувствуете разницу?

Идём дальше — меняем обозначение кодировки с вот такого

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

на такое:

<meta charset=utf-8>

Немного о вольностях — HTML5 не придирается к отсутствию кавычек, и, как я уже упомянул, ему не важно, пишите вы прописными или строчными буквами. Также теперь не обязательно ставить слеш в конце непарных тегов.

Определяем язык, пишем вместо

<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

это:

<html lang=ru>

Упростились также и ссылки на стили — атрибут type исчез, теперь это выглядит так

<link rel="stylesheet" href="style.css" />

Вместо прежнего

<link rel="stylesheet" href="style.css" type="text/css" /> 

Не нужно добавлять атрибут type для элементов <script> и <style>. Если, конечно rel не однозначный, например, на rel=alternate.

Прежде чем перейти к контенту, стоит остановиться ещё на 1-м моменте. Это хак под IE. Explorer не понимает новых тегов, так что стоит прописать скрипт для фиксации:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Еще необходимо сделать новые элементы блочными (это уже в css-файле):

aside, nav, footer, header, section { display: block }

Тут вроде всё разобрали, двигаемся дальше. Рассмотрим конструкцию, например, блога, в HTML4 и HTML5, а дальше я поясню различия

HTML4

 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <div id="header"> Шапка <div id="navigation">Навигация</div> </div> <div id="content"> <div id="post">Пост</div> <div id="sidebar">Боковая колонка</div> </div> <div id="footer">Подвал</div> </body> </html> 

И теперь взглянем по-новому:

naikom.ru

HTML lang attribute

1. lang attribute of HTML sets the language of an element in HTML document. Usage of lang attribute helps the browser to display the text in the desired language.

2. The value of the lang attribute is the language code specified by the W3C to be used with HTML.

Syntax

<ElementName lang="language_code">text content</ElementName> 

Where ElementName is any HTML element name except applet, base, basefont, br, frame, frameset, iframe, param, script.

Example of using lang attribute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <title>Example lang attribute - HTML tutorial | w3resource</title>  </head>  <body>  <p lang="en-US">This paragraph is in English.</p>  <p lang="es">Este apartado está en español</p>  </body>  </html>    

Result

html lang attribute«>

View this example in a separate browser window

Example of lang attribute

HTML dir attribute

Description

1. dir attribute of HTML sets the direction of the text within an element in HTML document.

2. The value of the dir attribute is either ltr (i.e. left to right) or rtl (i.e. right to left).

HTML dir attribute supports All elements but APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT

Example of using dir attribute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <title>Example dir attribute - HTML tutorial | w3resource</title>  </head>  <body>  <p dir="ltr" >This text is in left ot right direction.</p>  <p dir="rtl">טקסט זה בשטחים השמאלי בכיוון הנכון</p>  </body>  </html>     

Result

This text is in left to right direction.

טקסט זה בשטחים השמאלי בכיוון הנכון

View this example in a separate browser window

Example of dir attribute

Note

If you are using a plain text editor like notepad to write right to left text using dir="rtl", you must set the encoding style to UNICODE while saving the file.

w3resource.com

Синтаксис

Описание

Глобальный атрибут / параметр lang (от англ. «language» ‒ «язык») задаёт базовый язык содержимого элемента и текстовых значений атрибутов элемента. В качестве задаваемого значения должно выступать значение допустимое BCP 47 документом. В случае если полученное значение является нестандартной меткой языка, то оно должно рассматриваться браузером как неизвестный язык, имеющий данную метку.

Так же предусмотрено указание через тире («-») субверсии языка (версия языка: «en-us», «zh-gan»; набор символов для написания: «sr-Latn» ‒ сербский-латиница).

Данный параметр может выполнять следующие функции:

  • Оказание помощи поисковым системам;
  • Оказание помощи синтезаторам речи (выбор соответствующего произношения);
  • Помощь web-браузеру в выборе вариантов символов для высококачественной полиграфии (выбор соответствующих шрифтов, набора кавычек);
  • Помощь web-браузеру в принятии решений о переносах, лигатурах, и интервалах;
  • Помощь web-браузеру в выборе соответствующих пользовательских интерфейсов управления формой (выбор даты);
  • Содействие в проверке орфографии и грамматики (выбор соответствующего словаря).

Примечание

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


Поддержка браузерами


Спецификация


Значения


programmerbook.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.