для чего нужен атрибут translate

В HTML5 до­бав­лен но­вый ат­ри­бут translate

Как это работает? Скопировать ссылку

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

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

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

Зачем это нужно? Скопировать ссылку

Потребность в этом встречается довольно-таки часто. В спецификации HTML5 есть пример с игрой про пчелу и мёд. Вот похожий, но на этот раз реальный пример из моего опыта работы в Xerox, где документация, которая переводилась на другой язык, относилась к устройству, на котором текст находился прямо на «железе» и поэтому не переводился.

Оригинальный текст на английском — прим. переводчика.

Текст при переводе на русский язык — прим. переводчика.

Оригинальный текст на английском — прим. переводчика.

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

Следующий пример со страницы о французском хлебе — «хлеб» по-французски «pain».

Оригинальный текст на английском — прим. переводчика.

При переводе на русский язык. Речь идёт о французской компании, которая называется «french pain» — прим. переводчика.

Как обстоят дела у Google Translate и Microsoft Translator? Скопировать ссылку

Службы перевода Google и Microsoft и ранее предоставляли возможность предохранять текст от перевода посредством добавления разметки, но делали они это (несколькими) разными способами. Будем надеяться, что новый атрибут очень поможет тем, что предоставит стандартный подход.

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

Также непонятно, кстати, и с тем, и с другим сервисом перевода, как делать доступными для перевода вложенные элементы внутри элемента, для которого translate установлено в значении no — а это иногда может понадобиться.

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

Больше, чем просто атрибут translate Скопировать ссылку

с указанным классом должны иметь флаг translate в значении no в каком-либо конкретном наборе документов.

Накануне публикации перевода был представлен первый рабочий черновик ITS 2.0, следующей версии спецификации — прим. редактора.

Кстати, в ближайших планах W3C есть организаций новой рабочей группы совместно с проектом Европейской Комиссии — MultilingualWeb-LT — чтобы дальше развивать идеи по спецификации ITS и разработать ряд её практических реализаций. Помимо всего прочего, эта группа будет искать новые способы интеграции нового атрибута translate в процессы и стандарты индустрии локализации. Ждите, скоро всё будет!

Источник

HTML5

Словарь и соответствующие API для HTML и XHTML

Рекомендация W3C от 28 Октября 2014

3 Семантика, структура и API HTML-документов

3.2 Элементы

3.2.5.1 Атрибут

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

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

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

3.2.5.2 Атрибут title

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

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

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

Если значение title атрибута содержит «LF» (U+000A) символы, то содержание разделяется на несколько строк. Каждый «LF» (U +000A) символ во всплывающей подсказке представляет символ перевода строки.

Следует проявлять осторожность при переводе сроки в значениях title атрибутов.

Например, в следующем примере определение аббревиатурной расшифровки написано с разрывом строки:

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

В противном случае, если элемент имеет родительский элемент, то возвращается справочная информация родительского элемента.

В противном случае, возвращается пустая строка.

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

3.2.5.3 Атрибуты lang и xml:lang

XML атрибут в XML пространстве имён определён в XML. [XML]

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

Атрибут lang вне пространства имён может быть использован в любом HTML элементе.

Атрибут lang в XML пространстве имён может быть использован в HTML элементах в XML документах, а также в элементах других пространств имён, если позволяют это соответствующие технические характеристики (в частности, в MathML и SVG допускается использование lang атрибутов в XML пространстве имён указаных в их элементах). Если и атрибут lang не принадлежащий пространству имён и атрибут lang принадлежащий XML пространству имён указывается в одном элементе, то они должны иметь одинаковое значение без учёта ASCII регистра символов.

Авторы не должны использовать XML атрибут lang принадлежащий the XML пространству имён в HTML элементах HTML документов. Для облегчения перехода от XHTML, авторы могут указать атрибут не принадлежащий пространству имён без префикса и с буквальным локальным именем » xml:lang » в HTML элементах HTML документов, но такие атрибуты должны быть указаны только в случае, если для элемента уже указан атрибут lang не принадлежащий пространству имён, при условии, что оба этих атрибута имеют одинаковое значение без учёта ASCII регистра символов.

Атрибут вне пространства имён без префикса и с буквальным локальным именем » xml:lang » не влияет на обработку языка.

Для определения узла, агенты пользователей должны посмотреть на ближайший родительский элемент (в том числе и сам элемент, если узел является элементом), который имеет атрибут lang принадлежащий XML пространству имён или является HTML элементом, который имеет lang не принадлежащий пространству имён набора атрибутов. Данный атрибут задаёт язык узла (вне зависимости от его значения).

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

Если полученное значение является нестандартной меткой языка, то данное значение должно рассматриваться как неизвестный язык, имеющий данную метку языка отличающуюся от остальных языков. В целях кругооборота или общения с другими службами, которые ожидают языковые метки, web-браузеры должны оставить неизвестные метки языка без изменений, и пометить как языковые метки BCP 47, так чтобы впоследствии сервисы не интерпретировали данные как ещё один тип описания языка. [BCP47]

Так, например, элемент с lang=»xyzzy» будет соответствовать селектору :lang(xyzzy) (например в CSS), но не будет соответствовать :lang(abcde) хотя оба они одинаково недействительны. Аналогично, если веб-браузер и программа чтения с экрана, работают совместно обмениваясь информацией о языке элемента, браузер должен будет сообщать программе чтения с экрана, что меткой языка является «xyzzy», даже если он знает, что данная метка неверна, это делается на всякий случай для того, чтобы узнать поддерживает ли программа чтения с экрана язык с подобной меткой. Даже если программа чтения с экрана одновременно поддерживает BCP 47 и другие синтаксисы для кодирования названий языков, и в этом другом кодировании синтаксис строки «xyzzy» является одним из способов обозначения белорусского языка, было бы неправильным для программы чтения с экрана начать обрабатывать текст как белорусский, потому что «xyzzy» в BCP 47 кодах не описывается как белорусский (в BCP 47 для обозначения белорусского языка используется код «be»).

Если полученное значение является пустой строкой, то это значение должно быть интерпретировано как неизвестный язык узла.

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

IDL атрибут должен вернуть содержимое атрибута lang не принадлежащего пространству имён.

3.2.5.4 Атрибут translate

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

Следующие атрибуты являются :

IDL атрибут должен вернуть true, если режим перевода элемента находится в состоянии поддержки перевода и false в противном случае. При использовании, он должен задать атрибуту значение » yes «, если новое значение является true/правдой или в противном случае задать значение » no «.

В данном примере, после локализации страницы, все её содержимое за исключением образца вводимого текста и образца результата работы программы должно быть переведено:

Источник

transform

Краткая информация

Версии CSS

Описание

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

Синтаксис

Значения

Функции трансформации

matrix

rotate

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

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

Объектная модель

[window.]document.getElementById(» elementID «).style.transform

Браузеры

Источник

Using HTML’s translate attribute

Intended audience: HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), schema developers (DTDs, XML Schema, RelaxNG, etc.), and anyone needs guidance on how to use the HTML translate attribute.

Question

What is the translate attribute for, and how should I use it?

Quick answer

The translate attribute in HTML5 indicates that the content of the element should or should not be translated. There is no effect on the rendered page (although you could, of course, style it if you found a good reason for doing so). For example,

Using HTML’s translate attribute

If a page has no translate attribute, a translation system or translator should assume that all the text is to be translated. The yes value is therefore likely to see little use, though it could be very useful if you need to override a translate flag on a parent element and indicate some bits of text that should be translated. You may want to translate the natural language text in examples of source code, for example, but leave the code untranslated.

Details

Why it is needed?

Adding the translate attribute to your page can help readers better understand your content when they run it through automatic translation systems, and can save a significant amount of cost and hassle for translation vendors with large throughput in many languages.

You come across a need for this quite frequently. There is an example in the HTML5 spec about the Bee Game. Here is a similar, but real example where the documentation being translated referred to a machine with text in English on the hardware panel that wasn’t translated.

Click the Resume button on the Status Display or the
CONTINUE button
on the printer panel.

In a German translation this will become:

Drücken Sie Fortsetzen in der Statusanzeige oder die
Taste CONTINUE
an Ihrem Drucker.

Here are a couple more real-life examples of content that could benefit from the translate attribute. The first is from a book, quoting a title of a work which should stay in the original language.

The question in the title How Far Can You Go? applies to both the undermining of traditional religious belief by radical theology and the undermining of literary convention by the device of «breaking frame».

The next example is taken directly from a page in English about French bread – the French for bread is pain – and the code contains no translate attribute. The original is in English, which means that an automatic translation will translate the English word pain as a highly unpleasant physical sensation, rather than a thing you eat.

Welcome to french pain on Facebook. Join now to write reviews and connect with french pain. Help your friends discover great places to visit by recommending french pain.

You may also want to use it to protect keywords, code samples or examples from being translated. In the first paragraph of the example below, markup that looks like ordinary English words is being protected from translation. The source code of the second paragraph ensures that the whole paragraph remains in English.

Here is an example of the label element using the for attribute:

Enter your postcode to find the nearest store:

When to use translate=»yes»

Here is an example of the label element using the for attribute:

Enter your postcode to find the nearest store :

Working with attributes

For example, it is impossible to use markup for attribute values to manage bidirectional text in languages such as Arabic and Hebrew, or to mark up such things as language changes. And of course, it can be difficult to determine which attribute values should be translated and which should not. It is also difficult to identify a part of an attribute value that should be left untranslated, or an attribute value that should be left untranslated although the element content is translated.

The HTML specification lists attributes that should be treated as translatable. Attribute values not in this list are not to be translated.

This can, of course, cause problems in cases where you do want the attribute values to be translated but not the element content, or vice versa. In some cases those situations can be mitigated by nesting the markup concerned. For example, you could have an outer span element with translate set to yes that carries the title attribute you want to be translated. Inside that span you could put another span with translate set to no and containing the element content. This is how articles such as the one you are reading handle links to translated versions of a page – the title attribute of the outer element carries the name of the language pointed to, and the inner element carries the name of that language in the language itself (which should not be changed). This also helps when labelling the language using the lang attribute.

The following example shows how you could protect the word ‘English’, when it is a link to the English version of the document, when translating a page which is in German to another language. The informative title attribute would be translated. Without the translate flag, online services currently tend to translate the word ‘English’ to the equivalent in the target language or to ‘Deutsch’.

Because these are attribute values, however, it is still impossible to indicate whether parts of the text in the attribute value should be protected from translation.

(Bear in mind that the HTML5 specification, at the time of writing, is not yet stable, and implementations may not yet follow the specification.)

This approach is different from the general approach recommended by the ITS specification for XML-based languages. ITS (see below) recommends that attribute values be left untranslated by default, but it also provides a way of indicating specific attributes that should be translated, independent of their context.

Adding translate flags to a page

The translate attribute can, of course, be added to a page by a content author who is mindful of how they want the page to appear after translation. This is particularly useful for protecting content when a reader runs a page through an automatic translation service, such as those offered by Google, Microsoft and Yandex.

In industrial translation scenarios, localizers may add attributes during the translation preparation stage, as a way of avoiding the multiplicative effects of dealing with mistranslations in a large number of languages. This may be done via automated processes, such as entity recognition tools, that automatically recognize proper nouns.

It is also possible to use external files to (among other things) point to markup that should not be translated. For example, you may want to indicate that all span elements with a given class name should not be translated. A way of doing this is described by the Internationalization Tag Set (ITS) specification. A set of such rules can be valid for one page or many pages at the same time. Content developers and localizers may work closely together in setting up these rules to achieve a faster and better localization process.

Implementation support for the translate flag

The code translate=»no» is supported by Google, Microsoft and Yandex online translation services at the time of writing. The use of translate=»yes» to allow translation within a part of the document where translation is disallowed is not supported by Microsoft, but is supported by the other two services.

Legacy approaches for online translation services

Before the translate attribute was defined, both Google and Microsoft online translation services supported a number of other, non-standard ways to express similar ideas.

Microsoft and Google’s translation engines also don’t translate content within code elements. Note, however, that you don’t seem to have any choice about this – there don’t seem to be instructions about how to override this if you do want your code element content translated.

As already mentioned, the new HTML5 translate attribute provides a simple and standard feature of HTML that can replace and simplify all these different approaches, and will help authors develop content that will work with other systems too.

Источник

7 полезных HTML-атрибутов, о которых вы, возможно, не знаете

Веб-разработчик просто обязан хорошо знать HTML и уметь им пользоваться. Тот, кто не ориентируется в HTML, просто не может называться веб-разработчиком. Ведь каждый сайт в интернете создан с применением HTML. Этот язык разметки обладает массой ценных возможностей. В частности, HTML-элементам можно назначать атрибуты, применение которых позволяет расширять возможности элементов.

Некоторые атрибуты общеизвестны, а вот о некоторых кое-кто, возможно, и не знает. Сегодня мы поговорим о таких вот малоизвестных HTML-атрибутах.

1. Accept

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

Поэкспериментировать с атрибутом accept можно в этом CodePen-проекте. Этот же проект демонстрирует применение атрибута, который описан в следующем разделе.

2. Multiple

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

3. Contenteditable

Атрибут contenteditable применяется для того чтобы включить возможность редактирования элемента пользователем. Вот, например, описание списка, содержимое которого можно редактировать, находясь на веб-странице:

Вот соответствующий интерактивный пример на CodePen.

4. Download

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

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

5. Translate

Атрибут translate используется для указания на необходимость перевода некоего содержимого на другой язык. Это — глобальный атрибут, его можно назначать любым HTML-элементам.

Этот атрибут применим, например, в элементах, используемых для вывода названий компаний, которые, при переводе остального содержимого страницы, переводить не нужно. Он может принимать значения yes (переводить) и no (не переводить)

Вот как им пользоваться:

6. Poster

Атрибут poster применим к элементам и позволяет указывать адрес изображения, выводимого в окне просмотра во время загрузки видео, или выводимого до тех пор, пока пользователь не нажмёт кнопку воспроизведения. Вот пример:

Изображение picture.jpeg будет выводиться до тех пор, пока не будет нажата кнопка запуска воспроизведения видео.

7. Pattern

Вот как атрибуты pattern и title используются при описании поля, предназначенного для ввода трёхбуквенного кода страны:

Пример использования атрибута pattern можно найти здесь.

Итоги

Как видите, HTML-атрибуты могут принести веб-разработчику много пользы. Они позволяют оснащать обычные HTML-элементы дополнительными возможностями. Поэтому советую вам как следует освоить HTML-атрибуты, не ограничиваясь теми, о которыми мы тут говорили.

Бывало ли так, что вы узнавали о некоем HTML-атрибуте только после того, как другими способами реализовывали предоставляемые им возможности?

Источник