Какая ошибка в следующем коде a href page html b i страница 1 i a

Все вопросы

Всем привет! Недавно в голову пришла идея сделать одну очень занимательную прогу на питоне: Есть фишки и есть доска 8х8 ячеек. Пользователь вводит кол-во фишек (от 1 до 64, 1 фишка = 1 ячейка на доске).

208 показов

Ошибка запуска сервера PostgreSQL

Решил начать изучать PosgreSQL. Скачал с официального сайта Postgres и pgAdmin4. Но не могу запустить сервер в Postgres. Вот логи: 2022-12-31 18:50:17.046 MSK [4727] LOG: starting PostgreSQL 15.1 on .

429 показов

Перестал приходить код авторизации в телеграм через библиотеку telethon python

перестал приходить код авторизации через библиотеку telethon (Please enter the code you received: ) для telegram. Пытался заново переустановить python и telethon (удалял полностью папку python). Все .

926 показов

Как отловить запрос и тело запроса при нажатии на кнопку в Selenide?

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

Какой написать алгоритм чтоб можно было получать данные : id , name , username с этого сайта?

import requests response = requests.get(‘https://jsonplaceholder.typicode.com/users’) dict = response.json() for key in dict: for i in range(len(key)): Как мне стоит рассматривать то что я получаю .

40 показов

Не удается сделать post запрос

const request = await fetch(«http://localhost:3000/getPosts», < method: "POST", headers: < 'Content-Type': 'application/json;charset=utf-8' >body: JSON.stringify(<. 27 показов

Создать строки А1 и А2. В строку А3 добавьте в новую строку последние 4 символа строки A1 и первые 4 символа строки A2

Имеем строки A1 и A2. Строки вводятся пользователем (количество введенных символов не менее 10). Создайте строку A3 в соответствии со следующим правилом: добавьте в новую строку последние 4 символа .

67 показов

Firebase Remote Config: возвращается неправильное значение

Я создал булевую переменную в ремоут конфиг и значение у неё к примеру false, но нижеприведенный код всё время приводит мне true: package com.example.playagame.firebase import android.app.Activity .

Как передать значение через jQuery в php скрипт?

Не получается передать значение через jQuery в PHP. Пытаюсь передать значение data-id из input но ничего не передается. Что я делаю не так? Спасибо. $(function()< $('.who').bind("change keyup .

Как сделать бокове меню с помощью ?

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

90 показов

Почему useEffect не показывает элементы из массива?

Есть массив данных. Каждому повесил ref, чтобы потом перебрать все элементы. Но в useEffect ничего не консолится. Элементы я получаю только когда страница будет готова и я сделаю какое нибудь .

Как адаптивно прибить элементы справа?

У меня есть брейкпоинт, когда вместо списка ( см. рис. 1 отображается кнопка с дропдавновской менюшкой, но элементов в данном блоке у меня 3, то есть если б тут был чисто логотип и меню, то да, .

89 показов

Cannot add or update a child row SQL

Я пытаюсь добавить новый объект в таблицу SQL, но оно отказывает и выдаёт ошибку: «ER_NO_REFERENCED_ROW_2: Cannot add or update a child row: a foreign key constraint fails (lod.posts, CONSTRAINT .

CMAKE как подключить заголовочные файлы зависсимостей дочернего проекта

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

15 30 50 на странице

Важное на Мете

Связанные метки

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Все вопросы

$query = «SELECT category,name,brand,count,price,count*price,unit FROM goods order by category»; $result = mysqli_query ($conn, $query) or die (‘Error’); if($result) < $rows = mysqli_num_rows($.

user275180
задан 21 ноя 2018 в 12:44

Laravel-mix + Vue Ленивая загрузка

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

задан 21 ноя 2018 в 12:41
27 показов

Упорядоченный списком рендеринг данных из localStorage

Клик на Edit > ввод данных > клик на Save changes > обновить страницу. Результат должен быть: вывод на странице в списке тех данных, что я выводил до объявления страницы. Здесь песочница .

задан 21 ноя 2018 в 12:40
68 показов

Переборка массивов. Как реализовать?

Испытываю сложность с тем, чтобы перебрать массивы. Гуглил несколько часов напролет — на удивление, ничего не нашел. Суть следующая. Есть несколько массивов вида: Array ( [2] => Array ( [n] =>.

задан 21 ноя 2018 в 12:40
1k показов

Сгенерировать ETH адрес из private key

Как узнать ETH Account Address зная только Private key?
задан 21 ноя 2018 в 12:37
27 показов

Как нарисовать на карте произвольную фигуру? [дубликат]

Мне необходимо реализовать функционал как на яндекс-недвижимость. В песочнице примеров не нашел. Документацию тоже. Где я могу узнать об этом функционале подробнее? https://realty.yandex.ru/perm/.

задан 21 ноя 2018 в 12:36
69 показов

Python, изменение кодировки при архивации

При архивирование файлов этим нехитрым скриптом, все файлы, что имеют в название кириллицу, меняют кодировку и становятся нечитабельные. import tarfile import os import datetime DATE = datetime.

задан 21 ноя 2018 в 12:33
95 показов

Заменить названия ссылок

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

задан 21 ноя 2018 в 12:30
950 показов

Undefined index: meta_h1 оно все работает и почему то выходит ошибка?

Notice: Undefined index: meta_h1 in /home/administrator/system/storage /modification/catalog/controller/product/product.php on line 233 Если убираю if ($product_info[‘meta_h1’]) < $.

задан 21 ноя 2018 в 12:28
79 показов

Подсчет количества одинаковых символов в строке и вставка этого значения в строку

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

задан 21 ноя 2018 в 12:21

Соответствие документа doc/docx некоторому шаблону

Есть много документов (представим, что это научные работы студентов). Все документы написаны в MS Office Word и их форматирование должно соответствовать некоторому стандарту (Например какой-нибудь .

задан 21 ноя 2018 в 12:20

Как убрать _local из url для дефолтного языка

подскажите пожалуйста. Реализовал мультиязычность для сайта, но нужно убрать в урле приставку /en для дефолтного языка. Как это сделать? Например есть урлы: site.com/en/login -> site.com/login(.

задан 21 ноя 2018 в 12:18
111 показов

gcc заставляет использовать 11 стандарт?

В gcc возникает странная ошибка, когда пытаюсь скомпилировать этот код. В clang такого нет. В чём проблема? #error This file requires compiler and library support for the ISO C++ 2011 standard. .

задан 21 ноя 2018 в 12:17

Livereload для Sublime Text 3 не отслеживает файлы с одинаковыми именами в разных каталогах

Как заставить плагин Livereload для Sublime Text 3 отслеживать изменения в файлах с одинаковыми именами в разных каталогах, например: /style.css и /css/style.css? Если переименовать один из файлов, .

задан 21 ноя 2018 в 12:17
117 показов

как передать input [закрыт]

Подскажите пожалуйста, как передать содержимое этих input в php без кнопок и перезагрузки страницы. Вроде как можно через ajax. Пробовал, ничего не получилось.
задан 21 ноя 2018 в 12:07
189 показов

Как показывать слайды из папки? Slick slider.

Задача выводить все изображения в slick из определённой папки. Как я понимаю это можно сделать с помощью php. Подскажите как возможно сделать?

задан 21 ноя 2018 в 11:35
86 показов

Проблема с разрешением экрана

Есть строка: ( Screen.SetResolution(res[res.Length-1].width, res[res.Length-1].height, true);) которая делает разрешение экрана по умолчанию 1920×1080, но по неизвестной мне причине не делает этого.

задан 21 ноя 2018 в 11:24
390 показов

Как переменной присвоить произвольное поле?

Возможно, заголовок не совсем корректный. В WordPress реализую вывод записей по рубрикам. Хочу, чтобы рубрика указывалась через админку, через плагин произвольных полей «advanced custom fields»
задан 21 ноя 2018 в 11:19

laravel обработать сторонний Exception

Как можно обработать Exception стороннего пакета? Допустим вылеатет «exception»: «Tymon\\JWTAuth\\Exceptions\\TokenInvalidException Как можно его обработать в своих эксепшенах? допустим создам .

задан 21 ноя 2018 в 11:16
558 показов

Как убедится, что response body пустой?

/* java.lang.AssertionError: 1 expectation failed. Response body doesn’t match expectation. Expected: an empty collection Actual: */ Надо проверить, что response body пустой. //import static org.

задан 21 ноя 2018 в 11:12

Как установить плагин robovm?

Пытаюсь установить плагин robovm на android studio, при нажатии установка ничего не происходит. Как установить robovm? Устанавливаю через стандартную установку плагинов

задан 21 ноя 2018 в 11:09
31k показов

Изменить значение ячейки в Pandas DataFrame

>>df A B C D E 0 0 0 0 F 0 0 0 0 G 0 0 0 0 H 0 0 0 0 Необходимо изменить ячейку df[A][E]. Применение df[A][E] = 2 приводит к предупреждению.

задан 21 ноя 2018 в 11:07
249 показов

Ошибка при запуске пула IIS

Запускаю пул для mvc приложения на IIS. Всё работало. Но я добавил в приложение EntityFramework и mssql сервер. Появилась ошибка. Я установил mssqllocaldb 12 версии mssql сервера. И создал экземпляр с .

задан 21 ноя 2018 в 11:03

Как сделать update npm и node?

Сейчас у меня npm версия 6.0.0 и node версия v8.11.1. Как сделать update npm ? Как сделать update node.js ?

задан 21 ноя 2018 в 10:55
-10 голосов
67 показов

Как определить наличие слова в тексте? [закрыт]

как можно в php определить наличие определённого слова в тексте?
задан 21 ноя 2018 в 10:44
562 показа

Проблема с Windows Forms C++/CLI. Visual Studio 2017 [закрыт]

Создал проект Windows Forms согласно этой инструкции но в результате получаю ошибку (см. скриншот). Кто уже сталкивался с такой проблемой? И вот код, который написан в MyForm.cpp #include «MyForm.h» .

задан 21 ноя 2018 в 10:43
1k показов

всплывающий блок при наведении курсором JS

При наведении курсора на элемент должен всплывать блок с текстом, реализовано с JS так: $(document).ready(function() < if($(document).width() >992) < $('.button').hover(function() < var color = .

задан 21 ноя 2018 в 10:35
66 показов

Откуда яндекс тянет библиотеки js

Подскажите пожалуйста от куда Яндекса тянет библиотеки. у меня на странице юзаются вот такие .
задан 21 ноя 2018 в 10:28
446 показов

Создать многомерный массив из обычного массива

Есть массив на входе blocks:[ < value: 1, parent: null >, < value: 2, parent: 0 >, < value: 3, parent: 1 >, < value: 4, parent: 2 >, < value: 5, . задан 21 ноя 2018 в 10:26 856 показов

Вопрос по svg (path), не получается заполнить прогресс-бар

Никак не могу разобраться, как заполнить полосу зеленого цвета до 100, поможете?)
задан 21 ноя 2018 в 10:13
153 показа

Когда можно склеивать операторы ++ и +?

int x, y; int main() < x++ + ++y; x+++ ++y; x++ +++y; x +++++ y; >Почему эта программа не выдаёт ошибок для 1 и 2 строки, но выдаёт их для 3 и 4? error: lvalue required as .

задан 21 ноя 2018 в 9:57
243 показа

Где Visual Studio хранит мусор после установки обновления?

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

задан 21 ноя 2018 в 9:55

Как прочитать символ или символы в середине строки из файла?

Условие: Имя входного файла input.txt Имя выходного файла стандартный вывод Дан файл input.txt, в котором содержится текст. Напишите программу, которая найдет символ, который находится в середине .

задан 21 ноя 2018 в 9:53
149 показов

Кириллические символы выводятся из mysql вопросительными знаками

Имеется mysql база данных, в которой хранятся записи как латиницей, так и кириллицей. Подключение к базе происходит через const iconv = require(«iconv-lite») const < MySQL >= require(‘mysql-.

задан 21 ноя 2018 в 9:27
39 показов

Заменить адреса картинок на адреса со старого сайта

Сайт переехал на новый домен, однако не все картинки перенеслись по новым адресам. Нужно переписать адреса утерянных картинок класса article_image на адреса со старого домена. Адреса отличаются только .

задан 21 ноя 2018 в 9:16
124 показа

Вывод на сайте кастомных полей через админку WordPress

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

задан 21 ноя 2018 в 9:12
420 показов

как выделить блок памяти в c++ [закрыт]

вот так выглядит все задание полностью — Основной поток создает два других потока приостановленными и после их создания запускает первый. Первый из них выделяет блок памяти размеров 200Кб, заполняет .

задан 21 ноя 2018 в 9:01
258 показов

Wpf кнопка на tabcontrol

Есть tabcontrol(вкладка),на нем есть кнопка закрытия,но когда добавляешь draganddrob(перетаскивание вкладок) как в браузере,кнопка перестает работать. в чем ошибка? вот код xml
задан 21 ноя 2018 в 8:59
96 показов

Загрузка файла с помощью nemmo/yii2-attachments в Yii2

Установил расширение nemmo/yii2-attachments, но там нет инструкции как загружать файлы. Может кто нибудь приведет пример

задан 21 ноя 2018 в 8:56
69 показов

Сгруппировать строки

Всем привет! Составил запрос: select ta.id, ct.tag_id from table_a ta join table_tags ct on ta.id = ct.table_a_id where ct.tag_id in (1,2,3) Дополняю этот запрос строкой group by cr.id: select ta.

задан 21 ноя 2018 в 8:54

Binding нескольких коллекций как одной

Есть коллекция (ObservableCollection) A, каждый объект коллекции A имеет коллекцию B (ObservableCollection). Нужно сделать Binding для DataGrid ItemsSource всех коллекций B, каждая из которых в .

задан 21 ноя 2018 в 8:41
125 показов

Изменение строки по условию ассемблер

В регистре EBX хранится адрес, в котором хранится строка(String1). Мне нужно сравнить первые четыре символа строки String1 со String2. Если они равны, то изменить строку на String3. Ассемблер изучаю .

задан 21 ноя 2018 в 8:37
60 показов

Метод для авторизации через базу данных другого сайт?

Получается нужно сделать авторизацию для сайта (opencart) через сайт соседний( общая база данных тут и веб сервисы) и путем Curl сделал post запрос и получил токен и employeeCode. 1. Получается что .

задан 21 ноя 2018 в 8:35
810 показов

Как получить имя домена из ссылки?

Есть переменная: var url = «https://domain.com/?a=111&b=222&c=333»; Как в переменной оставить только domain.com?

задан 21 ноя 2018 в 8:25
96 показов

Как отсортировать массив PHP по названию ссылки

задан 21 ноя 2018 в 8:20
88 показов

Как работает kdf

Объясните, пожалуйста, как при одинаковом входящем пароле на выходе мы получаем разные ключи? Понимаю основные криптопримитивы симметричное/ассиметричное шифрование, блочное/поточное, хэширование, .

задан 21 ноя 2018 в 8:16
209 показов

Android Studio Profiler Network Overview — отображение кириллицы

Смотрю через Profiler ответы сервера и там кириллица отображается в виде кракозябр. Как сделать, чтобы в Profiler кириллица нормально отображалась? А если никак, то можно ли вообще как-нибудь .

задан 21 ноя 2018 в 8:02
132 показа

Алгоритм определения столкновения с объектом

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

задан 21 ноя 2018 в 7:46

Можно ли как-то вытащить конструкцию группировки из результата поиска регулярного выражения?

Собственно говоря код const char *first = «фывфыв@NameOfElement(pupa i lupa)вфывфыв»; const char *last = first + strlen(first); cmatch mr; regex rx(«@NameOfElement$(.*?)$»); regex_search(.

задан 21 ноя 2018 в 7:36
114 показов

Что лучше и безопаснее: private переменная экземпляра или локальная переменная в публичном методе?

Что лучше и безопаснее: private переменная экземпляра или локальная переменная в публичном методе, которая передает аргумент в другой метод? Пример для полного понимания: Требуется вывести результат .

задан 21 ноя 2018 в 7:27
15 30 50 на странице

Важное на Мете

Связанные метки

RTL Styling 101 — подробное руководство по RTL-стилизации в CSS

Более 292 миллионов людей во всём мире говорят на арабском, как на родном языке. К ним отношусь и я, поэтому иногда разрабатываю сайты, которые должны поддерживать оба направления написания текста: слева направо (LTR — Left To Right) и справа налево (Right To Left).

Введение в RTL-стилизацию

В CSS по умолчанию используется направление LTR. Если вы проверите стили браузера для элемента html, увидите, что для свойства dir (или “direction”) значение ltr является значением по умолчанию. Ниже приведён базовый пример для демонстрации различия между LTR и RTL разметкой.

Обратите внимание на блок RTL — в отличие от LTR, текст в нём читается справа налево. В этом простом примере браузер отобразил его правильно. Для смены направления языка документа, необходимо к корневому элементу добавить атрибут dir.

…

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

Стоит также упомянуть, что атрибуту dir можно задать значение “auto”, которое автоматически будет меняет направление для элемента на основании анализа его содержимого. Согласно HTML-спецификации:

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

Blueberry Cheesecake 
.

Изначально я использовал старый добрый float, чтобы выровнять изображение по левому краю в LTR разметке и, конечно же, применил clearfix.

.media:after content: ""; 
display: block; 
clear: both;
> 

.media img float: left; 
width: 200px; 
margin-right: 16px;
>

Затем мы добавляем dir=”rtl” для элемента, содержащего арабский текст. Получается следующий результат:

Все элементы выровнялись по правую сторону, кроме изображения. Это произошло из-за того, что для изображения задано свойство float: left и margin-right: 16px. Чтобы исправить это, нужно переопределить следующие стили

.media[dir="rtl"] img float: right; 
margin-right: 0; 
margin-left: 16px;
>

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

Чтобы избежать этой проблемы, устанавливайте соответствующее направление языка всякий раз, когда это возможно. Если элементу установить атрибут dir=”rtl”, он отобразится так, как ожидается.

Когда элементу задан атрибут dir=”rtl”, заголовок становится корректным. То есть, предложение выглядит грамматически правильным, а слова расположены в правильной последовательности.

В приведённом ниже примере я создал три элемента и пронумеровал их, чтобы продемонстрировать разницу при изменении направления страницы.

.element display: flex; 
flex-direction: row; /* Default value, added for clarity */
>

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

Обратите внимание, что в тексте, к которому применено свойство letter-spacing буквы каждого слова отделены друг от друга. Это неправильно. Арабские буквы должны выглядеть связанными, а сохранение такого же межбуквенного интервала, как и в английском, препятствует этому. Убедитесь, что при работе с многоязычным сайтом не забыли в нужном месте установить свойство letter-spacing: 0.

Появляются места, в которых цвет начертания символов меняется из-за их наложения. В этом примере свойство letter-spacing не было установлено, поэтому на проблему оно не влияет. Решение проблемы — задавать цвета без полупрозрачности (которая обычно выставляется через RGBa или opacity).

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

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

Кнопка “Done” переведена на арабский как “تم”, из-за чего становится достаточно маленькой и вообще выглядит странно. Специально для таких случаев, было бы лучше задать для кнопки свойство min-width. Я добавил его через панель разработчика, чтобы показать, как это должно выглядеть:

А вот очень похожий пример из Twitter:

Обратите внимание, что указанные выше проблемы у LinkedIn и Twitter были обнаружены на момент написания статьи (13 декабря 2019 года).

4. Усечение текста

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

Усечение для английского текста неправильное. Это должно происходить в конце элемента, а не в его начале. Чтобы решить эту проблему, необходимо задать для этого элемента атрибут dir=”auto”, и тогда браузер автоматически проанализирует содержимое и примет решение, какое значение dir применять.

أهلاً وسهلاً بكم في المقال الذي يتحدث عن تصميم صفحات الويب للغة العربية

Welcome to the article that explains how to design for RTL pages.

С точки зрения арабоговорящих, слово “تغريد” трудно читать по нескольким причинам:

не очень хороший шрифт
жирность ухудшает удобочитаемость
точки слова очень маленькие и слишком близко расположены к буквам

Я привёл несколько примеров, которые выглядят гораздо понятнее:

6. Смешивание хинди и арабских цифр

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

Хинди: ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
Арабский: 0 1 2 3 4 5 6 7 8 9

Числа, используемые в английском, унаследованы от арабских: “0, 1, 2, 3, 4, 5, 6, 7, 8, 9”. Текст, содержащий числа, должен соответствовать только одному из двух вариантов: либо хинди, либо арабскому.

Причина, по которой в Европе и Америке цифры называют “арабскими” в том, что они были введены в Европе в 10 веке арабоговорящими выходцами из Северной Африки.

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

Моменты, которые могут не работать при RTL

1. Высота строки (line-height)

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

Важно учитывать это и задать правильное значение для line-height для арабского текста.

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

2. Подчёркнутые ссылки

С арабскими словами стандартное подчеркивание ссылок из CSS выглядит плохо. Это связано с особенностями написания слов и букв в арабском языке и продемонстрировано на следующем изображении:

Я отметил проблемные области красным кругом. Подчёркивание перекрывает точки букв. Вот крупный план:

Точки, отмеченные красным кругом, перекрываются линией подчеркивания, что усложняет чтение. Решением является настройка кастомного подчёркивания с помощью CSS.

2.1. Оформление текста (text-decoration)

Существует возможность изменить стиль и цвет подчеркивания с помощью новых свойств text-decoration-style и text-decoration-color. Однако, нет гарантии, что это будет корректно работать со всеми семействами и размерами шрифтов. На момент написания статьи, Firefox является браузером с наилучшей поддержкой этих свойств.

.link-2 text-decoration-color: rgba(21, 132, 196, 0.2); 
text-decoration-style: normal; 
text-underline-offset: 4px; 
text-decoration-thickness: 2px;
>

2.2 Тень (box-shadow)

Браузерная поддержка свойства box-shadow гораздо лучше, чем у text-decoration. Можно проверить наличие поддержки одного из новых свойств text-decoration, и если браузер не поддерживает его, применить фолбэк с помощью свойства box-shadow.

.link-3 color: #000; 
text-decoration-color: rgba(21, 132, 196, 0.2); 
text-decoration-style: normal; 
text-underline-offset: 4px; 
text-decoration-thickness: 2px; 
box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2);
> 

@supports (text-decoration-color: red) .link-3 box-shadow: none; 
>
>

3. Перенос строки

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

Обведённые области — это разорванные переносом на новую строку арабские слова из-за применения word-break. А в арабском языке перенос слов не используется, потому что буквы каждого слова должны быть соединены друг с другом.

4. Сокращения

В английском языке нередко используют сокращения например, для дней недели. Таким образом, “Saturday” становится “Sat”.

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

Двунаправленные значки

Симметричные значки не нуждаются в переворачивании при переходе между LTR и RTL макетами. Вот несколько примеров:

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

Переворачивание элементов

Работая над некоторыми компонентами, мне нужен способ быстро перевернуть их. В Sketch я скопирую компонент и переверну его соответствующей командой. Такой же функционал доступен в Adobe XD и Figma

Чтобы увидеть, что я имею в виду, вот анимация, демонстрирующая, что я делаю после переворачивания компонента.

Особенности дизайна для RTL

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

Иконки кнопок

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

Поля ввода

Некоторые поля ввода форм должны оставаться выровненными по левую сторону даже в RTL режиме. Например, поля ввода email или номера телефона.

Хлебные крошки

Стрелочки между разделами в хлебных крошках также должны быть повёрнуты.

Заголовок страницы

Компонент заголовка страницы содержит начальную и конечную секции. Обе они должны быть повёрнуты в RTL

Таблицы

Таблицы также должны быть повёрнуты

Закладки

Если в закладках в LTR режиме иконка находится слева от названия, в RTL этот компонент нужно развернуть.

Карточка

Для горизонтальной карточки изображение и текст нужно менять местами в RTL

Всплывающие уведомления

Как вы и могли ожидать, иконки “закрыть” и “предупреждение” следует поменять местами

Логические свойства CSS

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

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

.page-header text-align: right;
>

[dir="rtl"] .nav-item text-align: left;
>

Что если бы был способ добавить только одно значение для свойства text-align, которое изменяло бы сторону выравнивания, учитывая направление страницы? На выручку приходят логические свойства CSS!

.page-header text-align: end;
>

При его использовании, сторона, задаваемая свойством text-align, будет основываться на направлении страницы. Демо

Чтобы было легче увидеть разницу между start и end, я подготовил схему ниже. Значение start равнозначно значению left в LRT и значению right в RTL. То же с end, только наоборот.

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

Логический Padding

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

.input--search < 
padding-inline-start: 1rem; 
padding-inline-end: 2.5rem;
>

Логический Margin

Margin справа от иконки должен быть логическим, поэтому мы используем для этого margin-inline-end.

.page-header__avatar < 
margin-inline-end: 1rem;
>

Логические рамки (border)

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

.nav__item < 
border-inline-start: 3px solid transparent;
> 

.nav__item.is-active border-color: #1e9ada;
>

Логическое скругление углов (border-radius)

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

.nav__item < 
border-start-end-radius: 30px; 
border-end-end-radius: 30px; 
background-color: transparent;
> 

.nav__item.is-active background-color: #ecf6fb;
>

Шпаргалка логических свойств

Если возникают сомнения насчёт выбора логического аналога свойства, определяющего сторону, можете подглядывать в шпаргалку ниже. Обратите внимание, что в ней приведены только те логические свойства, которые могут быть полезны при работе с LTR и RTL режимами. Я составил эту шпаргалку на основании замечательной статьи Адриана Роселли.

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

.input--search < 
padding-left: 1rem; 
padding-right: 2.5rem; 
padding-inline-start: 1rem; 
padding-inline-end: 2.5rem;
>

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

Соглашения об именовании в CSS

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

В обоих блоках ссылки одинаковые, но их названия разные. Во втором блоке класс see-link не имеет смысла. Хорошим именем может быть c-link. Приставка c– подставляется для компонентов, этот способ я перенял из ITCSS фреймворка.

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

Вместо того, чтобы давать элементам имена типа .c-page-header__left и .c-page-header__right, я называю их .c-page-header__start и .c-page-header__end. Это больше ориентировано на будущее и не предполагает, что сайт создаётся только в LTR или RTL режиме.

Инструменты автоматизации

Существуют отличные инструменты, облегчающие работу с LTR и RTL разметкой.

1. Bi-App-Sass

Bi-App-Sass от Анаса Накава позволяют писать одну версию стилей, которая компилируются в две разные таблицы стилей: одна для LRT, другая для RTL разметки.

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

.elem display: flex; 
@include margin-left(10px); 
@include border-right(2px solid #000);
>

Итоговый код CSS может быть следующим.

Файл app-ltr.css:

.elem display: flex; 
margin-left: 10px; 
border-right: 2px solid #000;
>

Файл app-rtl.css:

.elem display: flex; 
margin-right: 10px; 
border-left: 2px solid #000;
>

Заметьте, однако, что последний коммит в репозиторий на GitHub был четыре года назад (Ноябрь 2015).

2. RTLCSS

RTLCSS от Мохамеда Йонеса это фреймворк для конвертирования LTR таблиц стилей в RTL.

Отличие этого инструмента в том, что он применяется к уже собранной версии CSS-файла. Например, если у вас в проекте 50+ Sass-компонентов, RTLCSS пригодится для парсинга скомпилированного CSS-файла и создания из него RTL версии.

Практические примеры

Шапка сайта

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

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

.header__main,
.header__sub display: flex; 
justify-content: space-between;
>

Поскольку работа CSS Flexbox учитывает направление, заданное на странице, как объяснялось раньше в этом руководстве, он автоматически развернётся при RTL-разметке.

Следующий момент — это разделительная линия между логотипом и навигацией. Сначала я думал использовать border-right. Это работает, но не идеально. Лучше использовать псевдоэлемент, поскольку он развернётся вслед за направлением страницы.

.c-brand:after content: ""; 
display: inline-block; 
vertical-align: middle; 
width: 3px; 
height: 38px; 
border-radius: 5px; 
background: #e4e4e4; 
margin-inline-start: 1.25rem;
>

Вот текущий результат:

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

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

.topics-heading margin-inline-end: 1.5rem;
> 

.topics-list margin-inline-end: 1rem;
> 

.c-topic padding-inline-start: 0.5rem;
> 

.c-topic:not(:last-child) margin-inline-end: 10px;
> 

.c-topic__counter margin-inline-start: 1rem;
>

Как вы можете видеть, я использую логические свойства CSS вместо значений left и right.

Следующим шагом является ссылка “See All”. Обратите внимание на стрелку в конце. У неё должно быть следующее поведение:

При наведении цвет стрелки должен меняться
При наведении, к стрелке должна применяться анимация

Я решил использовать встроенный SVG для этой задачи.Когда задал стрелке смещение translate, задумался об RTL. Не существует логических свойств, подходящих для этой ситуации и мне нужно рассмотреть другое решение. Подошел вариант с изменением margin.

.c-link svg margin-inline-start: 4px; 
transition: 0.15s ease-in;
> 

.c-link:hover svg margin-inline-start: 8px;
>

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

.c-link:hover svg transform: translateX(6px);
> 

/* I’m using dir=rtl in the header for the purpose of clarity. It should be added to the root element. */
.c-header[dir="rtl"] .c-link svg transform: scaleX(-1);
> 

.c-header[dir="rtl"] .c-link:hover svg transform: scaleX(-1) translateX(6px);
>

Обратите внимание, что для RTL направления страницы я добавил scaleX(-1), чтобы развернуть иконку по горизонтали. Также можно использовать rotate(180deg), но вариант с масштабированием мне кажется более простым.

Дальше идёт поле поиска. Требования следующие:

Иконка поиска должна появляться в конце поля
Расположение иконки поиска должно быть динамическим

.c-input--search background-image: url("data:image/svg+xml. "); 
background-position: right 6px center;
> 

.c-header[dir="rtl"] .c-input--search /* We replace the original icon with a flipped one. */ 
background-image: url("data:image/svg+xml. "); 
background-position: right 6px center;
>

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

В результате получается следующая разметка для LTR и RTL режимов:

Следующим идёт мобильное меню. Для его обозначения я буду использовать гамбургер-иконку. Расположение иконки будет меняться в зависимости от направления (LTR или RTL). То же касается и направления анимации смещения.

Можете ознакомиться с демо на CodePen

Благодарность

Особая благодарность моей жене Kholoud за её постоянную поддержку и множественное вычитывание руководства. Также выражаю благодарность Adebiyi Adedotun Lukman и Šime Vidas за их поразительный отзыв.

Источники и вспомогательные статьи

Right to Left (The Mirror World
Let’s Talk About RTL
Basic Concepts of Flexbox
Basic Concepts of Grid Layout
Right-to-Left Development: Tips and Tricks
Arabic Numerals

Какая ошибка в следующем коде a href page html b i страница 1 i a

Document details

Большая книга CSS Part 001

Published on Dec 7, 2013