Разное

Dir ltr: Атрибут dir | htmlbook.ru

16.12.1970

Содержание

Атрибут dir | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+3.5+1.0+1.0+1.0+1.0+

Описание

Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

Синтаксис

dir={ltr | rtl}

Значения

ltr
Текст отображается как обычно — слева направо.
rtl
Текст инвертируется и отображается справа налево.

Значение по умолчанию

ltr

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут dir</title>
 </head>
 <body>
  <p dir="rtl">שבת — суббота</p>
  <p>В ашкеназском произношении звучит как «ша́бос» (идиш «ша́бес»), 
   а в сефардском — как «шаба́т».</p>
 </body>
</html>

Результат данного примера показан на рис. 1. В первом предложении изменился порядок слов.

Рис. 1. Направление текста

:dir() — CSS | MDN

Experimental

Это экспериментальная технология


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

:dir() — это псевдокласс CSS, который выбирает элементы на основе направления текста в них.


:dir(rtl) {
  background-color: red;
}

:dir() учитывает только семантическое направление, т.е. заданное в самом документе. Он не учитывает стилизованное направление, т.е. заданное CSS-правилами, например direction

.

Примечание:  помните о том, что псевдокласс :dir() не эквивалентен выбору по атрибуту [dir=…]. Последний применяется только к тем элементам HTML, у которых есть атрибут dir, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом [dir=rtl] и[dir=ltr] не будут включать auto.) :dir(), же, напротив, соответствует значению вычисленному user agent, даже унаследованному.

Примечание: В HTML, направление задаётся атрибутом dir. В других форматах могут использоваться иные методы.

:dir() требует одного параметра, представляющего желаемое направление.

Parameters

ltr
Выбирает элементы с направлением текста слева-направо.
rtl
Выбирает элементы с направлением текста справа-налево.

Formal syntax

HTML

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

CSS

:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

Result

BCD tables only load in the browser

  • Языково-специфичные селекторы CSS:
    :lang
    , :dir

Атрибут dir | HTML | WebReference

Задаёт направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

Значения

ltr
Текст отображается как обычно — слева направо.
rtl
Текст инвертируется и отображается справа налево.

Значение по умолчанию

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Атрибут dir</title> </head> <body> <p dir=»rtl»>שבת — суббота</p> <p>В ашкеназском произношении звучит как «ша́бос» (идиш «ша́бес»), а в сефардском — как «шаба́т».</p> </body> </html>

Результат данного примера показан на рис. 1. В первом предложении изменился порядок слов.

Рис. 1. Направление текста

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.03.2018

Редакторы: Влад Мержевич

css-style div с dir=ltr — CodeRoad



У меня есть этот div:

<div dir="ltr"></div>

Он генерируется автоматически с помощью функции imap_, и поэтому я не могу назначить ему какой-либо стиль с тегом style="" .

Мой вопрос заключается в том, как я могу назначить стили для div выше?

html css
Поделиться Источник oliverbj     04 января 2014 в 11:08

4 ответа


  • CSS ближайшие родительские правила

    Насколько я понимаю, принцип работы CSS заключается в том, что новые правила всегда имеют приоритет над старыми. Смысл, если я: a { color: black } a { color: white } Тег a будет белым. Я хочу, чтобы это не вступало в силу, например, при наличии подселектора: [dir=ltr] [text-end] { text-align:…

  • Safari игнорирует css dir=»ltr» после переключения файлов css

    Я добавил английский для своего сайта, так что он будет поддерживать 2 языка. На первом языке я использую файл css, где все равно RTL. Теперь, когда я переключаюсь на английский, я удаляю файл RTL css и добавляю файл css, где dir-это LTR. На Chrome, IR и Firefox он работает нормально. Но на Safari…



3

Селектор атрибутов хорошо работает, если вы просто хотите стилизовать этот конкретный элемент:

div[dir="ltr"] {
    /* Styles */
}

Поделиться BoltClock     04 января 2014 в 11:13


Поделиться Afzaal Ahmad Zeeshan     04 января 2014 в 11:10


Поделиться lummycoder     04 января 2014 в 11:13


  • html направление по языку? (если английский dir=ltr, если арабский dir=rtl)

    Могу ли я это сделать? Я имею в виду, если, например, содержимое <div> является ивритом или арабским, поместите <div> вправо и дайте ему атрибут dir=rtl . И, если содержимое <div> является английским, плавайте влево и измените атрибут dir на ltr . Возможно ли это?

  • как основать правило css на унаследованном значении атрибута dir

    Я знаю, что могу использовать [dir=’ltr’] или [dir=’rtl’] для выбора элементов, имеющих атрибут dir с определенным значением. так что я могу определить например [dir=’ltr’] .float-end {float:right} [dir=’rtl’] .float-end {float:left} чтобы получить класс .float-end , который плавает вправо или…



0

Попробуйте это:

CSS :

div[dir='ltr']
{
/*Styles*/
}

Fiddle

Поделиться Zword     04 января 2014 в 11:14


Похожие вопросы:


поместите границу вокруг круга/диска, который содержит текст с css

Используя CSS, у меня есть дисплей, который помещает текст в circle/disc. Вот пример того, что у меня есть: Но я изо всех сил стараюсь поместить красную рамку вокруг circle/disc. Я искал SO & в…


CSS как установить одинаковую высоту div с помощью bootstrap 3 col-md-4

У меня есть дисплей, который позволяет пользователям видеть выбранные значки с их собственным описанием. Я использую bootstrap 3.4 с col-md-4, так что каждый значок отображается по 3 в строке (в…


cufon LTR — RTL

У меня есть этот сайт Я использую cufon для преобразования текста в свой собственный шрифт. Проблема в том, что текст показан в обратном порядке. Я использую файл JavaScript под названием…


CSS ближайшие родительские правила

Насколько я понимаю, принцип работы CSS заключается в том, что новые правила всегда имеют приоритет над старыми. Смысл, если я: a { color: black } a { color: white } Тег a будет белым. Я хочу, чтобы…


Safari игнорирует css dir=»ltr» после переключения файлов css

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


html направление по языку? (если английский dir=ltr, если арабский dir=rtl)

Могу ли я это сделать? Я имею в виду, если, например, содержимое <div> является ивритом или арабским, поместите <div> вправо и дайте ему атрибут dir=rtl . И, если содержимое <div>…


как основать правило css на унаследованном значении атрибута dir

Я знаю, что могу использовать [dir=’ltr’] или [dir=’rtl’] для выбора элементов, имеющих атрибут dir с определенным значением. так что я могу определить например [dir=’ltr’] .float-end {float:right}…


Как я могу изменить все div-элементы dir с LTR на RTL при выборе языка?

Каков наилучший способ изменить все элементы div на основе выбора языка? Мой сценарий-просмотр веб-страницы на английском языке, а затем переход на язык ввода справа налево, Я хочу добавить dir=rtl…


LESS lazy load issue-стили для языков ltr и rtl в одном файле css с использованием миксинов и переменных

Мне предоставили less файлов, содержащих миксины и стили для LTR, а также RTL контента на веб-странице. Веб-страница одновременно показывает только один тип контента, либо LTR, либо RTL. Хотя я мог…


Установите DIR=»LTR» для каждого языка

Я использую тему wordpress / divi. Как мне убедиться, что если это AR (арабский), то он всегда остается LTR. Прямо сейчас он показывает: html lang=ar dir=rtl Мне нужно, чтобы он показал: html…

грандиозные Салоны И Пространства Для Уникальной Свадьбы в Melia Barcelona Sky

1. General information

This legal notice (hereinafter «Legal Notice«) are designed to regulate the use of the Internet portal service «www.melia.com» (hereinafter, the «website»). We recommend you read these terms carefully before using the website.

To comply with the provisions of Law 34/2002 of July 11 on information society and electronic commerce services, the general information of the website is as follows:

  • Owner: Melia Hotels International S.A.(MELIA)
  • Address: C/Calle Gremio Toneleros 24, 07009 Palma de Mallorca
  • Contact: [email protected]
  • Commercial register: Palma de Mallorca, Book: 112, Section: 1335, Page: PM-22603
  • Tax ID: A-78304516

2. Users

Access to and/or use of the website implies the condition of website user and acceptance from that moment in full and without reservation of these Terms and Conditions and any applicable Special Conditions which might supplement, modify or replace the General Conditions for certain website services and content. Prior to the use of the services offered by the website, it is therefore recommended that the user carefully read all relevant Conditions.

Use of the website is also subject to all other notices, regulations and instructions made known to the user by MELIA by any means which may substitute, complete and/or modify this Legal Notice. For greater flexibility in the operation of the website for the benefit of users, MELIA may modify the services provided and any aspect of the website as well as operating, technical and service conditions for use of the website services.

Similarly, MELIA may modify these Terms or Conditions as applied to any service or content, posting notice on the website. Changes will not be applied retroactively and will take effect from the date of publication. If you do not accept the amended terms of service , you must stop using the service. We recommend that you regularly check the terms of use of the website.

3. Use of the website, its services and content

The user agrees to use the website and its services and content in a manner consistent with current legislation, morals, good customs and public order, and not to contravene the provisions of this legal notice and those that may complement, modify or replace these provisions. Consequently, the user must not use the website or its services and content for any illegal purposes or purposes harmful to the rights and/or interests of MELIA or third parties which in any way harm the normal operation of the website or its services for the rest of its users, MELIA and/or its image.

In general the provision of the services does not require prior subscription or registration of users. However, MELIA may condition the use of some of the services upon completion of the corresponding user registration or forms. In all cases, registration will be carried out as expressly indicated in the service or in the special conditions governing it, and the user must provide accurate information and keep that information updated at all times. The user shall be solely responsible for any false or inaccurate statements made and any damages caused to MELIA or third parties by the information provided.

With respect to content (information, texts, images, sound files, photos, designs, etc), it remains prohibited:

  • Any reproduction, copy, dissemination, distribution, public communication, transformation or modification, unless there is permission from the legal owner or legislation.
  • Any violation of the rights of MELIA or its owners thereof.
  • Any use for commercial or advertising purposes other than those strictly permitted.
  • Any attempt to obtain the contents of the website by any means other than those made available to users as well as those commonly used on the Internet, provided they do not cause any harm to the MELIA website and/or services and content.

4. Responsibility of users for damages and reasons for exclusion

Use of the website is under the sole and exclusive responsibility of the user, MELIA being expressly exonerated with regard to any damages and/or injury caused to the user or third parties by any use not in line with the provisions of this Legal Notice and the specific conditions that in each case would apply. This responsibility includes the use by the user or any third party of any passwords or similar codes assigned for accessing the website, if any, or any of its services.

Without limiting the foregoing, MELIA reserves the right to refuse, without prior notice and at any time, access to the website to users who violate these terms, or the particular terms in each case as they are applicable and for any breach of law, morals and/or public order.

The exclusion of users does not constitute any waiver by MELIA of any right to conduct any appropriate legal action or compensation to which it may be entitled.

5. «Hyperlinks»

The website may make available to users links to other web sites operated and controlled by third parties. These links have the sole function of making it easier for users to search for information, content and services on the Internet and in no way may be considered a suggestion, recommendation or invitation to visit them. MELIA does not sell, manage, control, nor endorse any content, services, information and data available on such websites.

MELIA thus assumes no liability, either directly or indirectly, for any damages of any kind arising from access, maintenance, use, quality, legality, reliability and usefulness of the content, information , communications, opinions, events, products and services found or offered on websites not managed by MELIA and which are accessible through links on the website.

Any individuals or entities who wish to create a hyperlink from one web page to another Internet portal or any pages on the MELIA website must comply with the following conditions:

  • The total or partial reproduction of any services or content of the website is not permitted.
  • No deep-links or IMG or image links, nor frames with website pages will be allowed without the express permission of MELIA.
  • No false, inaccurate or incorrect will be included on the MELIA website, its employees, or the services or content offered .
  • Except for any signs that are part of the «hyperlink», the website on which it is found may not contain any trademark, trade name, label, name, logo, slogan or other distinctive signs belonging to MELIA unless authorized by MELIA.
  • The creation of a «hyperlink» does not imply the existence of any relationship between MELIA and the owner of the website or portal from which it is made, nor any knowledge or acceptance by MELIA of the services and content offered on that website.
  • MELIA is not responsible for the content or services made available to the public on any website containing a «hyperlink » or the information and statements included therein.
  • The web page on which the hyperlink appears may not contain any information which is illegal, contrary to morality and generally accepted good practices and public order, nor include contents which infringe the rights of third parties.

6. Intellectual property

All trademarks, trade names or logos of any kind that appear on the website are owned by MELIA or its licensors, and it may not be construed that the use or access to the website and/or the website services gives the user any rights over trademarks, trade names and/or distinctive signs and their use. in particular, the brands included in the Portal are subject to the laws applicable in the field of industrial property, being prohibited their reproduction or use without permission from the owner.

The content and information appearing on the website are the property of or its licensors or MELIA under the provisions of this Legal Notice, and it may not be understood that any of the rights that exist or may exist on any such content or information is being transferred to the user, beyond what is necessary for the correct use of the website and the website services.

MELIA maintains a strong commitment to the protection of Intellectual Property online. To this end, MELIA states that it has applied and implemented high security standards to protect the content posted on its website. However, despite this security, extraordinary situations may arise which are not attributable to MELIA and are beyond the control of MELIA. In this sense, in order to preserve the rights of intellectual property, should any user or third party consider that there has been a violation of their legitimate rights due to the introduction of specific content on the website, they must notify MELIA of such circumstances at the address mentioned above.

The Intellectual Property of the www.melia.com well as any other items considered likely to be subject to the rules of intellectual property, exclusively belong to MELIA, being MELIA the owner of all intellectual property rights.

As the sole owner of the intellectual property rights of the website, MELIA has exclusive rights to ownership of the domain www.melia.com and therefore grant any authorization for the exercise of any activity arising from exploitation rights thereof, and in particular the right of reproduction, public communication, distribution, or transformation, whatever the format used.

Any citation or reference to the industrial property rights of third parties included on the website implies a recognition by MELIA in favour of the holders of those intellectual property rights, not implying their inclusion or reference by the website the existence of any right or responsibility by MELIA with regard to them, having authorized their inclusion and appropriate citation in accordance with the provisions of regulations, with such inclusion not being considered in any way an endorsement or recommendation by MELIA for those brands.

The legitimacy of the intellectual rights relating to the content provided by third parties property is their sole responsibility.

Internet users visiting the website may view the information contained herein and download or reproduce it on their computer systems, provided that the parts copied are not given to any third parties or installed on an Internet-connected server or local network. Except as set out in this Legal Notice, the distribution, modification, cession, public communication or any other act involving all or part of the information published on the website is not permitted without prior authorization from MELIA.

The user must use the content and information contained in the website diligently, correctly, lawfully and, in particular, solely for personal, non-commercial use, provided they do not delete or modify any content or any mention of sources, copyright and other data identifying MELIA or the rights of third parties in its original form. The copying, distribution or publication of any kind of the content published on the website is prohibited without the prior written permission of MELIA.

7. Exemption from responsibility and guarantees

MELIA DOES NOT GUARANTEE THE ACCURACY, AVAILABILITY OR CONTINUITY OF WEBSITE SERVICES, AND EXCLUDES ANY RESPONSIBILITY FOR DAMAGES ARISING FROM A LACK OF ACCURACY, AVAILABILITY OR CONTINUITY OF THE WEBSITE OR ITS SERVICES. ALTHOUGH TO THE EXTENT POSSIBLE MHI WILL AIM TO PROVIDE TECHNICAL ASSISTANCE TO ANY USERS AFFECTED BY SUCH LACK OF ACCURACY, AVAILABILITY OR CONTINUITY, AND IMMEDIATELY ATTEMPT TO RECIFY THAT LACK OF ACCURACY, AVAILABILITY OR CONTINUITY BY ALTERNATIVE MEANS, MHI CAN IN NO EVENT BE HELD LIABLE FOR ANY LOSSES OR DAMAGES WHATSOEVER ARISING OUT USE OF THE WEBSITE AND BOOKING SYSTEM. USERS MAY ADDRESS ANY CLAIM AT THE HOTEL RECEPTION OR BY E-MAIL TO [email protected]

MELIA IS NOT RESPONSIBLE FOR ENSURING THE ABSENCE OF ANY VIRUSES OR OTHER ELEMENTS CONTAINED IN ITS CONENT IN THAT MAY CAUSE CHANGES IN USER SOFTWARE OR HARDWARE OR WEBSITE VISITORS AND ASSUMES NO LIABILITY WAHTSOEVER FOR DAMAGES OF ANY NATURE ARISING FROM THE FOREGOING.

Similarly, MELIA provides no warranty nor accepts any liability under any circumstances for damages of any kind that may result from:

  • Lack of usefulness, appropriateness or validity of the website and/or its services and content to meet the needs, activities or specific results or expectations of users.
  • The receipt, acquisition, storage, distribution or transmission by users of any content, and the infringement of intellectual property rights, trademarks, honour, personal and family intimacy, data protection, image, property or any rights of third parties as a result.
  • Misuse, negligent or fraudulent use, or any use contrary to these General Conditions, good faith, generally accepted uses or public order of the website, its services or contents by users.
  • The lack of legality, quality , reliability, usefulness, updating and availability of services provided by third parties and made available to users on the Website and/or the contents.
  • Failure by third parties with regard to their obligations or commitments in connection with the services provided to users through the website.
  • The views expressed by users on the forums , chat and review messages that may be enabled in the different areas of the Portal.
  • The knowledge that unauthorized third parties may obtain about the type, conditions, characteristics and circumstances of use that users make of the Website and the services and/or content.

8. Privacy and personal data policy

Personal data will be processed by MELIÁ HOTELS INTERNATIONAL, S.A. as described in the company Privacy Policy. If you wish, you may contact the Data Protection Office at [email protected] or by letter to the «Data Protection Office» at MELIÁ HOTELS INTERNATIONAL, S.A.

Due to the characteristics of the activity and services MELIA offers, and pursuant to the achievement of its objectives, the processing of personal data on users is required to provide the services, as well as the transfer of such data to third parties, including international transfers. To do this, the data will be collected and processed in a file owned by MELIA HOTELS INTERNATIONAL SA, established in Gremio Toneleros, 24, 07009 Palma de Mallorca, Spain. In this sense MELIA guarantees that the personal data is treated confidentially, and applies the strictest security measures required by Spanish legislation on data protection and storage for the treatment thereof.

IN ANY CASE, THE PURPOSE FOR WHICH THE INFORMATION PROVIDED BY USERS IS COLLECTED AND PROCESSED IS SPECIFIED WHEN THE SERVICE IS CONTRACTED THROUGH THE WEBSITE VIA A PRIVACY CLAUSE THAT MUST BE ACCEPTED AT ALL TIMES TO COMPLETE THE CONTRACTING OF THE SERVICE.

Similarly, data owners may, at all times, exercise their right to access the information and their rights to rectification, cancellation and opposition in the terms established in data protection legislation, by writing to the Marketing Department at the above address or via email to [email protected] (Ref. Data Protection). User consent to the processing and transfer of personal data will be revocable at any time without any retroactive effect, as required by Articles 6 and 11 of the Organic Law 15/ 1999 of 13 December on the Protection of Personal Data , through the same mechanism described above.

9. Applicable legislation and jurisdiction

The current conditions are subject to Spanish law.

Whenever the user is ordinarily resident in a Member State of the European Union, MELIA and the user will expressly waive rights to any other jurisdiction that may apply and will subject themselves to the jurisdiction of the Courts and Tribunals of the residence of the user for any issues or actions which may arise from the provision of services covered by these terms and the interpretation, application, enforcement or breach of the provisions above. If the user is ordinarily resident outside a Member State of the European Union, MHI and the user will expressly waive their rights to any other jurisdiction that may apply and will subject themselves to the jurisdiction of the Courts of Palma de Mallorca, Spain.

Структурная разметка и текст с направлением справа налево в HTML

Если для атрибута dir установлено значение auto, браузер будет смотреть на первый строго типизированный символ в элементе и определять, исходя из этого, базовое направление элемент должен быть. Если это еврейский (или арабский и т. Д.) Символ, элемент получит направление rtl. Если это, скажем, латинский символ, направление будет ltr.

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

Применяемое к блочным элементам, значение auto пригодится, когда вы заранее не знаете направление текста, вставляемого на страницу. Это также особенно полезно для работы с формами.

Вставка текста

на страницу с правильным базовым направлением

Приложения часто вставляют текст на страницу во время выполнения, извлекая информацию из базы данных или другого места, будь то сценарии на стороне сервера, такие как PHP, с использованием AJAX или каким-либо другим методом.Такой текст может быть многоязычным / мультискриптом, и направление текста может быть неизвестно заранее. (Многократный текст гораздо чаще встречается на страницах с преобладанием текста справа налево, чем на других страницах.)

Такой вставленный текст обычно является встроенным, и значение auto атрибута dir и другого элемента, называемого bdi , играют полезную роль в обработке таких ситуаций. Их использование для встроенной разметки более подробно описано в статье Встроенная разметка и двунаправленный текст в HTML .

Иногда полезно также маркировать содержимое уровня блока . Например, на форуме, где сообщения написаны как на урду, так и на английском, или где текст в одном сообщении представляет собой смесь абзацев на иврите и английском языке. Просто добавьте dir = "auto" к элементу, который окружает каждое сообщение, и первый строго типизированный символ в элементе будет определять направление содержимого этого элемента.

Спецификация HTML5 дает пример, относящийся к сеансу чата. Учитывая следующую наценку:

S : Как написать «Как вас зовут?» на арабском?


T : ما اسمك؟


S : Спасибо.


T : Это написано "رًا".


T : Вы умеете писать" Пожалуйста "?


S : "من فضلك", не так ли?

В браузере отобразится следующее:

Обратите внимание, как при поиске первого строго типизированного символа браузер пропускает текст в элементе bdi .Он также пропускает текст в элементах script , style и textarea , а также в любом элементе с атрибутом dir .

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

Информация о языке и направление текста

Информация о языке и направление текста

В этом разделе документа обсуждаются два важных вопроса, которые влияют на интернационализация HTML: указание языка ( lang атрибут) и направление ( dir attribute) текста в документе.

Определения атрибутов
язык = код языка [CI]
Этот атрибут определяет базовый язык значений атрибутов элемента. и текстовое содержимое. Значение этого атрибута по умолчанию неизвестно.

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

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

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

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

Например, если символы греческого алфавита появляются в середине Текст на английском языке:

Ее сверхспособности были результатом & gamma; -radiation, пояснил он.

пользовательский агент (1) должен попытаться отобразить англоязычный контент в подходящем способ (например, в обращении с кавычками) и (2) должны попытаться отобразить γ, даже если это не английский символ.

См. Раздел не отображаемые символы для соответствующей информации.

8.1.1 Коды языков

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

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

Вкратце, языковые коды состоят из основного кода и, возможно, пустого серия субкодов:

        language-code = primary-code (субкод "-") *
 

Вот несколько примеров кодов языков:

  • «en»: английский
  • «en-US»: английская версия для США.
  • «en-cockney»: английская версия кокни.
  • «и-навахо»: язык навахо, на котором говорят некоторые коренные американцы.
  • «x-klingon»: основной тег «x» указывает на экспериментальный язык. тег

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

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

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

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

В этом примере основным языком документа является французский («fr»). Один абзац объявляется на испанском («es»), после чего основной язык возвращается на французский. Следующий абзац включает встроенный японский («ja») фраза, после которой основной язык возвращается на французский.



<ГОЛОВА>
 Документ многоязычный 

<ТЕЛО>
  ... Интерпретируется как французский ... 

... Интерпретируется как испанский ...

... Снова интерпретируется как французский ...

... Французский текст прерван некоторыми Японский Здесь снова начинается французский ...

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

8.1.3 Расшифровка кодов языков

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

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

Определения атрибутов

dir = LTR | RTL [CI]
Этот атрибут определяет базовое направление нейтрального по направлению текста. (я.д., текст, не имеющий присущей направленности, как определено в [UNICODE]) в содержимом элемента и значениях атрибутов. Он также указывает направленность таблиц. Возможные значения:
  • LTR : текст или таблица с направлением слева направо.
  • RTL : текст или таблица с письмом справа налево.

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

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

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

  ... цитата на иврите ...  
 

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

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

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

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

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

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

Рассмотрим следующий пример текста:

  английский2 ИВРЕЙСКИЙ2 английский4 ИВРЕЙСКИЙ4 английский5 ИВРЕЙСКИЙ6
 

Символы в этом примере (и во всех связанных примерах) хранятся в компьютер так, как они здесь отображаются: первый символ в файле это «е», второе — «n», а последнее — «6».

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

английский2 2ТИРВИ английский4 4ТИРВИ английский5 6ТИРВИ
         <------ <------ <------
            H H H
------------------------------------------------->
                       E
 

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

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

6ТИРВИ английский5 4ТИРВИ английский4 2ТИРВИ английский2
        -------> -------> ------->
            E E E
<-------------------------------------------------
                       ЧАС
 

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

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

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

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

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

Например:



<ГОЛОВА>
 <em> ... заголовок с написанием справа налево ... </em> 

 ...право налево ... 

... текст с письмом слева направо ...

... снова текст с письмом справа налево ...

С другой стороны, встроенные элементы

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

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

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

Рассмотрим тот же пример текста, что и раньше:

английский2 ИВРЕЙСКИЙ2 английский4 ИВРЕЙСКИЙ4 английский5 ИВРЕЙСКИЙ6
 

Предположим, что преобладающий язык документа, содержащего этот абзац английский. Кроме того, в приведенном выше предложении на английском языке есть раздел на иврите. простирается от HEBREW2 до HEBREW4, а раздел на иврите содержит Цитата на английском языке (english4). Таким образом, желаемое представление текста:

английский2 4ТИРВИ английский4 2ТИРВИ английский5 6ТИРВИ
                 ------->
                    E
         <-----------------------
                    ЧАС
------------------------------------------------->
                    E
 

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

english2  HEBREW2 english4 HEBREW4  english5 HEBREW6
 

Авторы также могут использовать специальные символы Unicode для достижения нескольких встроенных направление меняется. Чтобы добиться встраивания слева направо, окружайте внедренный текст с символами LEFT-TO-RIGHT EMBEDDING ("LRE", шестнадцатеричный 202A) и POP НАПРАВЛЕННОЕ ФОРМАТИРОВАНИЕ ("PDF", шестнадцатеричный, 202C).Чтобы добиться написания справа налево встраивание, окружайте внедренный текст символами СПРАВА ВСТАВЛЕНИЕ ("RTE", шестнадцатеричный 202B) и PDF.

Использование разметки направленности HTML с Unicode персонажи. Авторы и разработчики программного обеспечения для разработки должны быть знать, что конфликты могут возникнуть, если атрибут dir используется во встроенном элементы (в том числе BDO ) одновременно с соответствующими [UNICODE] символы форматирования. Предпочтительно использовать один или другой исключительно.Метод разметки дает лучшую гарантию структурной структуры документа. целостность и устраняет некоторые проблемы при редактировании двунаправленного текста HTML с простым текстовым редактором, но некоторые программы могут лучше использовать [UNICODE] символы. Если используются оба метода, следует соблюдать осторожность. для обеспечения правильного размещения разметки и направленного встраивания, или переопределить, в противном случае результаты рендеринга не определены.

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

BDO

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

Определения атрибутов

реж = LTR | RTL [CI]
Этот обязательный атрибут определяет базовое направление текста элемента. содержание.Это направление отменяет присущую символам направленность как определено в [UNICODE]. Возможные значения:
  • LTR : текст слева направо.
  • RTL : текст с письмом справа налево.

Атрибуты, определенные в другом месте

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

Рассмотрим документ, содержащий тот же текст, что и раньше:

английский2 ИВРЕЙСКИЙ2 английский4 ИВРЕЙСКИЙ4 английский5 ИВРЕЙСКИЙ6
 

, но предположим, что этот текст уже был помещен в визуальный порядок. Одна причина для этого может быть, что стандарт MIME ([RFC2045], [RFC1556]) отдает предпочтение визуальному порядку, то есть символу с письмом справа налево. последовательности вставляются в поток байтов справа налево.В электронном письме указанное выше может быть отформатирован, включая разрывы строк, как:

английский2 2ТИРВИ английский4
4ТИРВИ английский 5 6ТИРВИ
 

Это конфликтует с двунаправленным [UNICODE] алгоритм, потому что этот алгоритм инвертирует 2WERBEH, 4WERBEH и 6WERBEH во второй раз, показывая слова на иврите слева направо, а не справа налево.

Решением в этом случае является переопределение двунаправленного алгоритма на помещая выдержку из электронного письма в PRE элемент (для сохранения разрывов строк) и каждый линия в Элемент BDO , атрибут dir которого установлен на LTR :

 английский2 2WERBEH английский4 
 4ТИРВИ английский5 6ТИРВИ 

Это говорит двунаправленному алгоритму «Оставь меня слева направо!» и будет произвести желаемую презентацию:

английский2 2ТИРВИ английский4
4ТИРВИ английский 5 6ТИРВИ
 

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

Авторы также могут использовать специальные символы Юникода для отмены двунаправленный алгоритм - LEFT-TO-RIGHT OVERRIDE (202D) or RIGHT-TO-LEFT ПЕРЕЗАГРУЗКА (шестнадцатеричный 202E). НАПРАВЛЕННОЕ ФОРМАТИРОВАНИЕ POP (шестнадцатеричный 202C) символ завершает любое двунаправленное переопределение.

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

Двунаправленность и кодировка символов Согласно [RFC1555] и [RFC1556] существуют специальные соглашения для использования значения параметра "charset", указывающие на двунаправленную обработку в почте MIME, в в частности, чтобы различать визуальный, неявный и явный направленность. Значение параметра «ISO-8859-8» (для иврита) обозначает визуальное кодирование, «ISO-8859-8-i» означает неявную двунаправленность, а «ISO-8859-8-e» обозначает явную направленность.

Поскольку HTML использует алгоритм двунаправленности Unicode, соответствующий документы, закодированные с использованием ISO 8859-8, должны быть помечены как «ISO-8859-8-i». Явный направленное управление также возможно с помощью HTML, но не может быть выражено с помощью ISO 8859-8, поэтому «ISO-8859-8-e» использовать не следует.

Значение «ISO-8859-8» означает, что документ отформатирован визуально, неправильное использование разметки (например, ТАБЛИЦА с выравниванием по правому краю и без переноса строк) для обеспечения разумного отображения на старых пользовательских агентах, которые не обрабатывают двунаправленность.Такие документы не соответствуют данной спецификации. При необходимости их можно привести в соответствие с действующей спецификацией (и на то же время будет правильно отображаться на старых пользовательских агентах) путем добавления BDO разметка там, где это необходимо. Вопреки тому, что сказано в [RFC1555] и [RFC1556], ISO-8859-6 (арабский) - , а не . визуальное упорядочивание.

8.2.5 Персонаж ссылки для управления направленностью и присоединением

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

В следующем отрывке из DTD представлены некоторые направленные объекты:

   
   
   
   
 

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

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

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

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

8.2.6 влияние таблиц стилей на двунаправленность

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

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

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

Пример свойства CSS direction | dir ltr rtl in html

Текст / контент, отображаемый на веб-странице, можно контролировать с помощью HTML и CSS.

  • атрибут dir в HTML
  • атрибут direction в CSS

атрибут dir в html

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

  
текстовое содержимое справа налево

Поддерживается во всех основных браузерах.

Атрибут направления

в CSS.

Свойство направления

в CSS, используемое для изменения направления текстового элемента, отображаемого на странице.Он имеет два значения: rtl и ltl , ltr - значение по умолчанию. rtl - это язык, читаемый справа налево, ltr - слева направо.

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

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

В этой статье говорится о следующих вещах

синтаксис

  css_selector {
направление: rtl / ltr / начальное / наследование;
}
  

значения атрибута направления:

  • ltr - по умолчанию, слева направо
  • rtl - справа налево
  • начальное - начальное значение по умолчанию
  • наследует значение от родительского

CSS свойство direction rtl ltr с примерами

, если свойство CSS объявлено с ltr, все элементы отображаются и отображаются пользователю слева направо

Вот пример со свойством направления и без него

  




    <стиль>
        .слева направо {
            направление: ltr;
        }
        
        .справа налево {
            направление: RTL;
        }
    



     

Пример направления CSS


Это текст, размещенный слева направо

По умолчанию слева направо без свойства direction

Это текст, размещаемый справа налево

И вывод

### Арабское направление веб-сайта со свойством CSS direction

Арабские веб-сайты имеют направление текста справа налево на веб-странице.

Это означает, что направление css должно применяться ко всему элементу html, тег Html имеет атрибут dir для указания направления текста всего документа справа налево

с html,

  



    

это будет текст на арабском языке

со свойством css direction,

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

Это направление в CSS и атрибут dir в HTMl поддерживается во всех популярных браузерах.

  • Chrome
  • Mozilla
  • Внутренний проводник
  • Opera
  • Safari

Заключение

Направление текста

можно контролировать с помощью свойства direction CSS и атрибута dir в HTML.

Они очень полезны справа налево и наоборот.

Текст с письмом справа налево на языках разметки

Текст с письмом справа налево на языках разметки

Двунаправленный текст

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

См. Также: Пользовательские интерфейсы для языков с письмом справа налево и еврейские символы и их значения в Юникоде
Другие языки с написанием справа налево перечислены в FAQ: Направление скриптов и языки.


HTML, XHTML

Атрибут HTML DIR задает базовое направление ( LTR , RTL ) текста или фрагментов текста. Базовое направление может влиять на порядок отображения строк текста в разных направлениях, и отображение нейтрального по направлению текста (т. е. символы или последовательности символов, которым не присуща направленность, как определено в Стандарте символов Юникода).

Примеры использования атрибута DIR


Демонстрация атрибута DIR для двунаправленного текста

Вот предложение, устанавливается первым в абзаце с направлением слева направо с помощью атрибута HTML DIR (

) а затем повторил без изменений в абзаце с направлением справа налево (

).
Обратите внимание, что открывающая скобка "(" и закрывающая квадратная скобка "]" намеренно продемонстрировать свою точку зрения.

(В этом примере требуется браузер, поддерживающий двунаправленное отображение текста. Microsoft IE поддерживает двунаправленную визуализацию текста. Отобразите эту страницу в разных браузерах для сравнения. Вот графическое изображение этого примера, которое вы можете использовать для сравнения или для просмотра ожидаемых результатов: Демонстрация атрибута DIR для двунаправленного текста)

В этом примере показано, как браузеры, поддерживающие двунаправленный текст, ведут себя с различные настройки атрибута DIR.

HTML-разметка Отображение результатов

Он сказал мне "שלם" (шалом).

Он сказал мне "שלם" (шалом).

Он сказал мне "שלם" (шалом).

Он сказал мне «שלם» (шалом).

Наджиб сказал мне: "السلام عليكم" (ас-салам алейкум).

Наджиб сказал мне: "السلام عليكم" (ас-салам алейкум).

Наджиб сказал мне: "السلام عليكم" (ас-салам алейкум).

Наджиб сказал мне: «السلام عليكم» (ас-салам алейкум).

Спасибо Наджибу Тунси за арабский пример.

Изменения из-за атрибута DIR в этом примере:

  • изменяет выравнивание абзаца с выравнивания по левому краю на выравнивание по правому краю.
  • меняет порядок относительного размещения участков текста разного направления.Первый прогон («Он сказал») размещается с выравниванием по правому краю, как и ожидалось, в абзаце RTL. Следующий запуск RTL-текста (еврейское слово шалом) помещается слева от первого прогона, продолжая последовательность справа налево. Для англоговорящих это кажется неправильным, но правильным с точки зрения того, что движение влево продвигается в системе письма справа налево. По той же причине точка отображается крайним левым.
  • Скобки и квадратные скобки не имеют внутреннего направления. Открывающая скобка находится между Текст LTR и RTL запускается и поэтому не может «наследовать» направление окружающего текста.Следовательно по умолчанию используется базовое направление RTL абзаца и помещается слева от еврейского слова шалом. Обратите внимание, что закрывающая квадратная скобка вставлена ​​в один проход текста слева направо. Поэтому он принимает направление окружающего его текста и помещается справа от английского слова shalom.
  • Обратите внимание, что открытая скобка отображается «зеркально». То есть это похоже на закрывающую круглую скобку на английском. Круглые и квадратные скобки, а также некоторые другие символы отображаются как зеркальные изображения (т.е. перевернутый) когда текст направлен справа налево. Это потому, что символы имеют семантику открытия и закрытия, не графически влево и вправо. Открытая или квадратная скобка в тексте с письмом справа налево, отображается как зеркальное отображение, так что он визуально охватывает текст слева от него. Аналогично закрывающие круглые скобки и скобки также зеркально отображены, поэтому они обращены к тексту справа.

DIR также определяет направленность таблиц.

Пример направления ТАБЛИЦА с использованием DIR = "LTR"

Европейские цифры 0 1 2 3 4 5 6 7 8 9
Арабские цифры ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩

Например, если DIR = "RTL" добавлен к элементу

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

Пример направления ТАБЛИЦА с использованием DIR = "RTL"

Европейские цифры 0 1 2 3 4 5 6 7 8 9
Арабские цифры ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩

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

ABC١٢٣X

CSS2

CSS2 имеет свойство direction, аналогичное атрибуту HTML DIR. Он также представил unicode-bidi для дополнительного управления Двунаправленный алгоритм Unicode (UAX9).

.my-rtl {направление: RTL; юникод-биди: вставлять;} ... установить нейтральные позиции справа налево <- |

Текстовый модуль CSS3

CSS3 имеет свойство direction для указания "линейного потока" слева направо и справа налево.Он также имеет свойство unicode-bidi для управления Двунаправленный алгоритм Unicode (UAX9).

CSS3 имеет свойство для определения последовательности и ориентации блоков. В свойство block-progression может укажите вертикальный поток сверху вниз или горизонтальный поток слева направо или справа налево.

Writing-mode свойство - это сокращенный способ указать оба направление и блок-прогрессия.

/ * устанавливает вертикальное письмо сверху вниз, столбцы идут справа налево * / .вертикальный {режим письма: tb-rl;}

CSS3 также позволяет поворачивать символы на 90, 180 и 270 градусов: Ориентация глифа в пределах текста.

CSS3 имеет функцию, которая влияет на отображение арабского текста, свойство text-kashida-space. Хотя Кашида - арабский иероглиф, в этом контексте "Кашида - это типографский эффект, используемый в Системы арабского письма, допускающие удлинение глифов в некоторых тщательно отобранные точки ».


  • Задайте общее направление документа для элемента HTML, а не для элемента BODY.
  • Используйте кодировки символов, которые используют логический, а не визуальный порядок, например Unicode, Окна-1255, Окна-1256, ISO-8859-6-i, ISO 8859-8-i.
    Не используйте визуально упорядоченные: ISO 8859-6, ISO 8859-8, ISO-8859-6-e, ISO-8859-8-e. См. RFC 1555.
  • Используйте разметку вместо двунаправленных управляющих символов Unicode.
    Unicode
    Символ
    Имя
    Скалярное значение
    Функция Эквивалентная разметка
    LRE U + 202A Вложение слева направо Атрибут DIR e.г. DIR = "LTR"
    RLE U + 202B Встраивание справа налево Атрибут DIR, например DIR = "RTL"
    PDF U + 202C Pop Directional Format Без эквивалента переопределение концов
    LRO U + 202D Отмена слева-на- Элемент BDO, например
    RLO U + 202E Переопределение справа налево Элемент BDO e.г.
См. Unicode в XML и других языках разметки (UTR 20).

Условные обозначения

Группа интернационализации W3C теперь рекомендует составители спецификаций, которые используют такие термины, как "оставленная собственность" и "право собственности" следует избегать в пользу таких терминов, как «свойство-до» и «свойство-после». Когда направление письма меняется, например, слева направо либо сверху вниз, либо справа налево, "до" и "после" по-прежнему верны и не нуждаются в быть измененным.(Это верно для большинства спецификаций W3C. целей. Ваши функции могут отличаться.)

Ссылки


HTML | Атрибут dir - GeeksforGeeks

Этот атрибут используется для указания направления текста содержимого элемента.

Синтаксис:

  

Значение атрибута: Этот атрибут содержит три значения, которые перечислены ниже:

  • ltr: Это значение по умолчанию.Это значение представляет текст в направлении текста слева направо.
  • rtl: Это значение представляет текст в направлении текста справа налево.
  • auto: Позвольте браузеру определять направление текста на основе содержимого.

Пример 1:

< html >

> голова < заголовок > атрибут dir заголовок >

< стиль >

h2 {

цвет: зеленый

}

h2, h3 {

выравнивание текста: по центру;

}

стиль >

головка >

0

>

0 корпус

< h2 > GeeksforGeeks h2 >

< h3 > атрибут dir h3 p dir = "rtl" > GeeksforGeeks: A

Портал компьютерных наук для вундеркиндов p >

/ / тело >

html >

Выход:


Пример 2:

< html >

0

0 >

< заголовок > атрибут dir заголовок >

< стиль >

9000 9000 9000 9000 h2 { 9000 цвет: зеленый;

}

h2, h3 {

выравнивание текста: по центру;

}

стиль >

головка >

0

>

0

корпус

< h2 > GeeksforGeeks h2 >

< h3 > атрибут dir h3

p dir = "ltr" > GeeksforGeeks: A

Портал информатики для вундеркиндов p >

>

html >

Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом dir , перечислены ниже:

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Внимание читатель! Не прекращайте учиться сейчас.Получите все важные концепции конкурентного программирования с помощью веб-дизайна для начинающих | HTML курс.


: dir () | Codrops

Селектор псевдокласса : dir () CSS используется для выбора элемента на основе его направленности, определяемой языком документа.

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

В документе HTML5 направленность элемента может быть указана с помощью атрибута dir . Направленность может быть установлена ​​на ltr (слева направо) или rtl (справа налево).Например:

Селектор псевдокласса : dir () принимает в качестве аргумента rtl или ltr . Псевдокласс : dir (ltr) представляет собой элемент, имеющий направленность слева направо ( ltr ). Псевдокласс : dir (rtl) представляет элемент, имеющий направленность справа налево ( rtl ).Значения, отличные от ltr и rtl , не являются недопустимыми, но ни с чем не совпадают. (Если будущая спецификация разметки определяет другие направления, то селекторы CSS могут быть расширены, чтобы разрешить соответствующие значения.)

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

Общая информация и заметки

Поскольку направленность элемента устанавливается с помощью атрибута dir , элемент с установленной направленностью также можно выбрать с помощью селектора атрибутов [dir = ""] .Например:

article [dir = "rtl"] {
    / * стили, применяемые к элементам article, для которых направленность rtl  установлена ​​с помощью атрибута dir  * /
}
                 

Использование : dir () не эквивалентно использованию селектора [dir = ""] .

Селектор атрибута [dir = ""] выполняет только сравнение с заданным атрибутом элемента.Это означает, что он будет соответствовать элементу, только если для него установлен атрибут dir . Он не будет соответствовать , а не элементу, для которого не установлен атрибут dir , даже если элемент имеет определенную направленность, указанную в другом месте документа. Более того, если атрибут dir имеет значение auto , он не будет соответствовать ни [dir = "ltr"] , ни [dir = "rtl"] .

С другой стороны, селектор псевдокласса : dir () будет соответствовать элементу, даже если его направленность унаследована от его ближайшего предка с допустимым атрибутом dir .Кроме того, элемент, который соответствует dir = "auto" , будет соответствовать либо : dir (ltr) , либо : dir (rtl) , в зависимости от разрешенной направленности элементов, определяемой его содержимым.

Примеры

В следующем примере будут выбраны и стилизованы все элементы с направленностью ltr :

*: dir (ltr) {
    / * здесь стили * /
}
                 

Следующее выберет все цитаты с направленностью rtl :

blockquote: dir (rtl) {
    / * здесь стили * /
}
                 

Живая демонстрация

Текст в следующей демонстрации будет синим, если он соответствует : dir (ltr) , и зеленым, если он соответствует : dir (rtl) . (Дополнительную информацию о том, работает ли эта демонстрация в вашем браузере, см. В разделе «Поддержка браузера» ниже.)

Посмотреть эту демонстрацию на игровой площадке Codrops

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

Селектор псевдокласса : dir () в настоящее время поддерживается только в Firefox с префиксом -moz- .

postcss-rtl - npm

PostCSS-плагин для RTL-адаптивности

Создает правила RTL с перевернутыми свойствами.Используйте один файл для обоих направлений!

Примеры

Простые объекты недвижимости

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

Ввод LTR:

 

.foo {

float: right;

поле слева: 13 пикселей;

выравнивание текста: по правому краю;

размер шрифта: 13 пикселей;

цвет рамки: светло-серый;

ширина границы: 2 пикселя 0 2 пикселя 2 пикселя;

обрамление: сплошная штриховая сплошная сплошная

}

.foo {

выравнивание текста: центр;

}

LTR + RTL выход:

 

.foo {

font-size: 13px

}

[dir] .foo {

border-color: lightgray

}

[dir = "ltr"] .foo {

]

поплавок: правый;

поле слева: 13 пикселей;

выравнивание текста: по правому краю;

ширина границы: 2 пикселя 0 2 пикселя 2 пикселя;

стиль границы: сплошная штриховая сплошная сплошная

}

[dir = "rtl"].foo {

float: left;

поле справа: 13 пикселей;

выравнивание текста: по левому краю;

ширина границы: 2px 2px 2px 0;

border-style: сплошной сплошной сплошной штриховой

}

[dir] .foo {

text-align: center

}

Анимации

Подвижные ключевые кадры-анимации будут разделены на две части. правила на основе направлений с суффиксами -ltr или -rtl

Ввод LTR:

 

.foo {

анимация: 1 сек. слайд 0s простота вставки

}

@keyframes slide {

из {

преобразование: перевод (-1000px)

}

в {

преобразование: перевод (0)

}

}

LTR + RTL выход:

 

[dir = "ltr"] .foo {

анимация: 1 сек. Слайд-ltr 0 сек. Вставка-выдвижение

}

[dir = "rtl"].foo {

animation: 1s slide-rtl 0s easy-in-out

}

@keyframes slide-ltr {

from {

transform: translate (-1000px)

}

to {

преобразование: перевод (0)

}

}

@keyframes slide-rtl {

из {

преобразование: преобразование (1000 пикселей)

}

в {

) преобразование: преобразование (0)

}

}

Директивы по значениям

Для преобразования значений декларации используйте директивы значений:

  • / * rtl: prepend: {value} * / - добавить {value} перед текущим значением
  • / * rtl: append: {value} * / - добавить {value} после текущего значения
  • / * rtl: {value} * / - заменить текущее значение на предоставленное значение

Источник

 

.foo {

font-weight: bold;

Семейство шрифтов

: "Droid Sans", "Helvetica Neue", Arial, sans-serif / * rtl: prepend: "Droid Arabic Kufi", * /;

преобразование: поворот (45deg) / * rtl: append: scaleX (-1) * /;

flex-direction: row / * rtl: row-reverse * /;

}

Результат

 

.foo {

font-weight: жирный;

}

[dir = ltr] .foo {

font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif / * rtl: prepend: "Droid Arabic Kufi", * / ;

преобразование: поворот (45deg) / * rtl: append: scaleX (-1) * /;

flex-direction: row / * rtl: row-reverse * /;

}

[dir = rtl].foo {

Семейство шрифтов

: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif;

преобразование: поворот (45 градусов) scaleX (-1);

flex-direction: ряд-реверс;

}

Директива о собственности

Для преобразования названия свойства объявления используйте директивы свойств:

  • / * rtl: as: {prop} * / - для обработки свойства как {prop}. Можно использовать для настраиваемых свойств

Источник

 

: корень {

--padding: 1rem 2rem 3rem 4rem;

}

Результат

 

[dir = ltr]: root {

--padding: 1rem 2rem 3rem 4rem;

}

[dir = rtl]: root {

--padding: 1rem 4rem 3rem 2rem;

}

Игнорирование определенных деклараций

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

  • / * rtl: ignore * / - игнорировать следующее правило или содержащее объявление
  • / * rtl: begin: ignore * / и / * rtl: end: ignore * / - игнорировать правила в пределах

Игнорировать одно правило:

 

.foo {

padding-left: 0

}

Блочный синтаксис для игнорирования правил в пределах области:

 

.foo {

padding-left: 0

}

.bar {

direction: ltr

}

Синтаксис значения для игнорирования одного объявления CSS:

 

.foo {

margin-left: 20px;

padding-right: 20px / * rtl: ignore * /;

}

/ *! Нотация тоже подойдет:

 

.foo {

padding-left: 0

}

Использование

  1. Подключите его к PostCSS

     

    const postcss = require ('postcss')

    const rtl = require ('postcss-rtl')

    postcss ([rtl (options)])

    Примеры для вашей среды см. В документации PostCSS.

  2. Управляйте направлением, переключаясь между dir = "ltr" и dir = "rtl" в элементе .

С Webpack:

 

module.exports = {

module: {

rules: [{

test: /\.css$/,

use: [

{loader: 'style-loader'},

{loader : 'Css-loader'},

{loader: 'postcss-loader',

параметры: {

плагины: функция () {

return [require ('postcss-rtl') (опции)]

}

}

}

]

}]

}

}

Глотком:

 

гл.src ('style.css')

.pipe (postcss ([rtl (options)]))

.pipe (gulp.dest ('./dest'))

Опции

  • addPrefixToSelector : Пользовательская функция для добавления префикса к селектору. По желанию. Пример:

     

    function addPrefixToSelector (селектор, префикс) {

    return `$ {prefix}> $ {selector}`

    }

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

  • Только Направление : генерировать только одностороннюю версию: ltr или rtl

  • prefixType : переключение между добавлением атрибутов и классов.Дополнительно:

    • атрибут (по умолчанию рекомендуется): .foo => [dir = rtl] .foo
    • класс (полезно для IE6): .foo => .dir-rtl .foo
  • префикс : Использует настраиваемую строку вместо 'dir' для добавленных атрибутов и селекторов классов

    • например 'data-my-custom-dir' (для атрибута prefixType): .foo => [data-my-custom-dir = rtl].foo
    • например 'my-custom-dir' (для класса prefixType): .foo => .my-custom-dir-rtl .foo
  • removeComments (по умолчанию: true ): удалить rtl: * комментариев после их обработки

  • from RTL (по умолчанию: false ): предположим, что все стили написаны в направлении RTL, и сгенерируем для них соответствующие стили LTR

  • черный список : массив свойств css, обработка которых будет игнорироваться Пример:

     

    ['padding-left', 'padding-right']

  • белый список : массив свойств css, которые (и только они) будут обрабатываться Пример:

     

    ['поле', 'цвет границы']

Спасибо

Большое спасибо проектам:

.

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

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