Translate x: translateX() — CSS: Cascading Style Sheets

2D трансформации. Перемещение | CSS: Transform (трансформация объектов)

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

• translate() — перемещение объекта по координатам x и y
• rotate() — поворот объекта относительно его левого верхнего угла
• scale() — масштабирование объекта
• skew() — наклон элемента. В двумерном пространстве функция деформирует элемент

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

Система координат

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

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

Точка отсчёта

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

Любой HTML-объект на странице — прямоугольник, вне зависимости от его внешнего вида. Для примера создадим круг и добавим границу свойством outline, чтобы увидеть реальные границы блока. Точки с координатами (0, 0) находятся в левом верхнем углу элемента.

Перемещение объекта

Для перемещения объекта вдоль осей координат x и y используется функция translate() свойства transform.

Это сокращение от двух функций:

• translateX()
• translateY()

которые позволяют перемещать объект по осям x и y соответственно. Синтаксис функции перемещения может иметь разный вид:

• transform: translate(x, y)
• transform: translateX(x) translateY(y)

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

---

Важно: translate() отсчитывается именно от нулевой точки объекта, а не страницы.

---

Обратите внимание на наложение элементов друг на друга при использовании свойства transform. Элемент с данным свойством будет находится выше по оси z, чем другие элементы при прочих равных условиях.

Relative VS Translate

В течение урока может не покидать мысль, а зачем использовать функцию translate(), если давно существует относительное позиционирование и свойства top, right, bottom, left?

С точки зрения визуального эффекта оба подхода дадут одинаковый результат, но, как обычно, дьявол кроется в деталях. Этих дьяволов два:

• Использование процентных значений
• Работа с анимациями

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

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

• Квадрат с номером 1: translateX(50%)
• Квадрат с номером 2: left: 50% с относительным позиционированием

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

• Квадрат с номером 1 был сдвинут на 100px / 2 = 50px вправо. 100px — это ширина квадрата.
• Квадрат с номером 2 был сдвинут на 250px / 2 = 125px право. 250px — это размер колонки, в которой находится квадрат.

Такие манипуляции могут применяться при позиционировании элементов внутри страницы. Одна из самых распространённых задач — центрирование модального окна. В курсе про позиционирование уже было похожее испытание. Как известно, сделать аккуратное позиционирование используя только абсолютное позиционирование сложно. Есть десятки способов это сделать, но использование связки абсолютного позиционирования и функции translate() — лучший вариант.

Метод Translate переводчика — Azure Cognitive Services

• Статья
• 10/21/2022
• Чтение занимает 13 мин

Этот интерфейс позволяет переводить текст.

URL-адрес запроса

Отправьте запрос POST на следующий адрес.

https://api.cognitive.microsofttranslator.com/translate?api-version=3.0

Параметры запроса

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

Необходимые параметры

Параметр запроса	Описание
api-version	Обязательный параметр. Версия API, запрошенная клиентом. Необходимое значение: 3.0.
значение	Обязательный параметр. Определяет язык выходного текста. Целевой язык должен быть одним из поддерживаемых языков, включенных в область translation. Например, используйте параметр to=de, чтобы перевести на немецкий. Вы можете одновременно переводить на различные языки, использовав этот параметр в строке запроса несколько раз. Например, используйте параметр to=de&to=it, чтобы перевести на немецкий и итальянский.

Необязательные параметры

Параметр запроса	Описание

Параметр запроса	Описание
из	Необязательный параметр. Определяет язык оригинального текста. Чтобы просмотреть, какие языки доступны для перевода, выполните поиск поддерживаемых языков, используя область translation. Если параметр from не указан, исходный язык определяется автоматически. При использовании функции динамического словаря необходимо использовать параметр from, а не автоматическое определение. Примечание. Функция динамического словаря учитывает регистр.
textType	Необязательный параметр. Определяет, является ли текст перевода обычным или HTML-текстом. Любой код HTML должен быть полным элементом с правильным форматом. Возможные значения: plain (по умолчанию) или html.
категория	Необязательный параметр. Строка, где указано категорию (домен) перевода. Этот параметр позволяет получить переводы из пользовательской системы, созданной с помощью Custom Translator. Добавьте в этот параметр идентификатор категории из сведений о проекте пользовательского переводчика, чтобы использовать развернутую настроенную систему. Значение по умолчанию: general.
profanityAction	Необязательный параметр. Указывает способ обработки нецензурной лексики в переводе. Возможные значения: NoAction (по умолчанию), Marked или Deleted. Способы работы с нецензурной лексикой см. в этом разделе.
profanityMarker	Необязательный параметр. Указывает, каким образом нецензурная лексика должна помечаться в переводе. Возможные значения: Asterisk (по умолчанию) или Tag. Способы работы с нецензурной лексикой см. в этом разделе.
includeAlignment	Необязательный параметр. Указывает, следует ли применять выравнивание из оригинального текста в переводе. Возможные значения: true или false (по умолчанию).
includeSentenceLength	Необязательный параметр. Указывает, следует ли включать границы предложения оригинального и переведенного текста. Возможные значения: true или false (по умолчанию).
suggestedFrom	Необязательный параметр. Указывает автоматический язык, если не удается определить язык оригинального текста. Автоопределение языка применяется при опущении параметра from. Если обнаружение завершается сбоем, используется язык suggestedFrom.
fromScript	Необязательный параметр. Указывает сценарий оригинального текста.
toScript	Необязательный параметр. Указывает скрипт переведенного текста.
allowFallback	Необязательный параметр. Указывает, что службе разрешено откатиться к общей системе, когда пользовательская система не существует. Возможные значения: true (по умолчанию) или false. allowFallback=false указывает, что для перевода должны использоваться только те обученные для category системы, которые указаны в запросе. Если для перевода с языка X на язык Y требуется связывание с помощью переходного языка E, все системы в цепочке (X → E и E → Y) должны быть пользовательскими и находиться в одной и той же категории. Если система с определенной категорией не найдена, запрос вернет код состояния 400. allowFallback=true указывает, что службе разрешено откатиться к общей системе, когда пользовательская система не существует.

Заголовки запроса:

Заголовки	Описание
Заголовки для проверки подлинности	Обязательный заголовок запроса . См. описание доступных способов аутентификации.
Content-Type	Обязательный заголовок запроса. Указывает тип содержимого для полезных данных. Допустимое значение: application/json; charset=UTF-8.
Content-Length	Обязательный заголовок запроса. Длина текста запроса.
X-ClientTraceId	Необязательно. Созданный клиентом идентификатор GUID, позволяющий уникально идентифицировать запрос. Этот заголовок можно опустить, если в строке запроса указан идентификатор трассировки в параметре с именем ClientTraceId.

Текст запроса

Текст запроса является массивом в формате JSON. Каждый элемент этого массива представляет собой объект JSON со строковым свойством Text, который являет собой строку для перевода.

[
    {"Text":"I would really like to drive your car around the block a few times."}
]

Сведения об ограничениях символов и массивов см. в статьеОграничения запросов.

Текст ответа

Успешный ответ возвращается в формате массива JSON с одним результатом для каждой строки входного массива. Объект результата содержит следующие свойства.

• detectedLanguage — объект, описывающий распознанный язык с помощью следующих свойств:

  • language — строку, которая представляет код обнаруженного языка.

  • score — значение с плавающей запятой, обозначающее достоверность результата. Может принимать ноль или единицу, где низкая оценка обозначает низкую достоверность.

    Свойство detectedLanguage присутствует в объекте результатов только при запросе автоматического распознавания языка.

• translations — массив результатов перевода. Размер массива совпадает с количеством языков, указанных с помощью параметра запроса to. Каждый элемент массива содержит:

• transliteration — объект, который возвращает переведенный текст в сценарии, указанном в параметре toScript.

  • script — строка, которая указывает целевой сценарий.

  • text — строка, которая возвращает целевой текст в целевом сценарии.

    Если не выполняется транслитерация, объект transliteration не включается.

    • alignment — объект с одним свойством строки proj, который преобразовывает оригинальный текст в переведенный. Сведения о выравнивании предоставляются, только когда параметр запроса includeAlignment имеет значение true. Сведения о выравнивании возвращаются в виде строкового значения в следующем формате: [[SourceTextStartIndex]:[SourceTextEndIndex]–[TgtTextStartIndex]:[TgtTextEndIndex]]. Двоеточие разделяет начальный и конечный индексы, дефис — языки, а пробел — слова. Одно слово может соответствовать нулю, одному или нескольким словам другого языка. При этом сопоставленные слова могут не располагаться рядом. Если сведения о выравнивании недоступны, элемент Alignment будет пустым. Примеры и ограничения см. в разделе Получение сведений о выравнивании.

• sentLen — объект, возвращающий границы предложения в оригинальном и переведенном текстах.

  • srcSentLen — массив целых чисел, представляющих значения длины предложений в оригинальном тексте. Длина массива соответствует количеству предложений, а значения — длине каждого предложения.

  • transSentLen: массив целых чисел, представляющих значения длины предложений в переведенном тексте. Длина массива соответствует количеству предложений, а значения — длине каждого предложения.

    Границы предложения включены только тогда, когда параметр запроса includeSentenceLength имеет значение true.

• sourceText — объект с одним свойством строки text, который возвращает оригинальный текст в сценарии по умолчанию исходного языка. sourceText свойство присутствует только в том случае, если входные данные выражаются в сценарии, который не является обычным для этого языка. Например, если входные данные были на арабском языке, но написаны латинским алфавитом, тогда параметр sourceText.text вернет текст на арабском языке, преобразованным в арабский сценарий.

Примеры ответов JSON приведены в разделе примеры.

Заголовки	Описание
X-requestid	Сформированное службой значение для идентификации запроса. Используется для устранения неполадок.
X-mt-system	Указывает тип системы, который использовался для перевода каждого целевого языка, запрошенного для перевода. Это значение представляет собой список строк, разделенных запятыми. Каждая строка обозначает тип: * Пользовательский — запрос включает пользовательскую систему, и при переводе использовалась как минимум одна пользовательская система. * Команда — все остальные запросы
X-metered-usage	Указывает потребление (количество символов, за которые с пользователя будет взиматься плата) для запроса задания перевода. Например, если слово «Hello» переводится с английского языка (en) на французский (fr), это поле вернет значение «5».

Ниже приведены возможные коды состояния HTTP, которые возвращает запрос.

Код состояния	Описание
200	Успешно.
400	Один из параметров запроса отсутствует или является недопустимым. Исправьте параметры запроса и повторите попытку.
401	Не удалось выполнить аутентификацию запроса. Убедитесь, что указаны допустимые учетные данные.
403	Запрос не авторизован. Подробные сведения можно найти в сообщении об ошибке. Этот код состояния чаще всего означает, что достигнут лимит бесплатных операций перевода, включенных в пробную подписку.
408	Не удалось выполнить запрос, так как отсутствует ресурс. Подробные сведения можно найти в сообщении об ошибке. Если запрос включает пользовательскую категорию, этот код состояния часто указывает, что пользовательская система перевода пока недоступна для обслуживания запросов. Запрос необходимо повторить после периода ожидания (например, 1 минута).
429	Сервер отклонил запрос, так как клиент превысил ограничения для запросов.
500	Произошла непредвиденная ошибка. Если ошибка сохраняется, передайте отчет о ней, включив следующие данные: дата и время сбоя, идентификатор запроса из заголовка ответа X-RequestId и идентификатор клиента из заголовка запроса X-ClientTraceId.
503	Сервер временно недоступен. Повторите запрос. Если ошибка сохраняется, передайте отчет о ней, включив следующие данные: дата и время сбоя, идентификатор запроса из заголовка ответа X-RequestId и идентификатор клиента из заголовка запроса X-ClientTraceId.

Если возникнет ошибка, запрос также вернет ответ JSON с ошибкой. Код ошибки представляет собой число из 6 знаков, первые 3 из которых являются кодом состояния HTTP, а оставшиеся 3 цифры определяют категорию ошибки. Коды распространенных ошибок можно найти на справочной странице переводчика версии 3.

Примеры

Перевод отдельного элемента

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

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=zh-Hans" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'Hello, what is your name?'}]"

Текст ответа:

[
    {
        "translations":[
            {"text":"你好, 你叫什么名字？","to":"zh-Hans"}
        ]
    }
]

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

Перевод одного ввода с автоопределением языка

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

curl -X POST "https://api.cognitive. microsofttranslator.com/translate?api-version=3.0&to=zh-Hans" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'Hello, what is your name?'}]"

Текст ответа:

[
    {
        "detectedLanguage": {"language": "en", "score": 1.0},
        "translations":[
            {"text": "你好, 你叫什么名字？", "to": "zh-Hans"}
        ]
    }
]

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

Перевод методом транслитерации

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

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=zh-Hans&toScript=Latn" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'Hello, what is your name?'}]"

Текст ответа:

[
    {
        "detectedLanguage":{"language":"en","score":1. 0},
        "translations":[
            {
                "text":"你好, 你叫什么名字？",
                "transliteration":{"script":"Latn", "text":"nǐ hǎo , nǐ jiào shén me míng zì ？"},
                "to":"zh-Hans"
            }
        ]
    }
]

Результат перевода теперь включает свойство transliteration, которое возвращает переведенный текст, написанный символами латиницы.

Перевод нескольких фрагментов текста

Одновременный перевод нескольких строк — это просто вопрос задания массива строк в тексте запроса.

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=zh-Hans" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'Hello, what is your name?'}, {'Text':'I am fine, thank you.'}]"

Ответ содержит перевод всех фрагментов текста в том же порядке, что и в запросе. Текст ответа:

[
    {
        "translations":[
            {"text":"你好, 你叫什么名字？","to":"zh-Hans"}
        ]
    },
    {
        "translations":[
            {"text":"我很好，谢谢你。","to":"zh-Hans"}
        ]
    }
]

Перевод на несколько языков

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

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=zh-Hans&to=de" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'Hello, what is your name?'}]"

Текст ответа:

[
    {
        "translations":[
            {"text":"你好, 你叫什么名字？","to":"zh-Hans"},
            {"text":"Hallo, was ist dein Name?","to":"de"}
        ]
    }
]

Работа с нецензурной лексикой

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

Если необходимо избежать появления ненормативной лексики при переводе (независимо от наличия ненормативной лексики в источнике), можно использовать параметр фильтрации ненормативной лексики. Этот параметр позволяет выбрать, что нужно делать с нецензурной лексикой: удалить, пометить ее соответствующими тегами (что дает возможность добавить собственный метод постобработки) или ничего не предпринимать. Допустимые значения ProfanityAction: Deleted , Marked и NoAction(по умолчанию).

ProfanityAction	Действие
NoAction	NoAction — алгоритм действий по умолчанию. Ненормативная лексика оригинального текста сохранится в переводе. Пример исходного текста (японский). 彼はジャッカスです。 Пример перевода (английский): He’s a jack—.
Deleted	Оскорбительные слова будут удалены из выходных данных без замены. Пример исходного текста (японский). 彼はジャッカスです。 Пример перевода (английский): He’s a**
Marked	Нецензурную лексику в выходных данных заменяют маркеры. Маркер зависит от параметра ProfanityMarker. Если установлен параметр ProfanityMarker=Asterisk, нецензурную лексику заменяют символы ***: Пример исходного текста (японский). 彼はジャッカスです。 Пример перевода (английский): He’s a \\\*. Если установлен параметр ProfanityMarker=Tag, нецензурная лексика выделяется XML-тегами <profanity> и </profanity/>: Пример исходного текста (японский). 彼はジャッカスです。 Пример перевода (английский): He’s a <profanity>jack—</profanity>.

Пример:

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=de&profanityAction=Marked" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'This is an <expletive> good idea.'}]"

Данный запрос возвращает:

[
    {
        "translations":[
            {"text":"Das ist eine *** gute Idee.","to":"de"}
        ]
    }
]

Сравнение:

curl -X POST "https://api.cognitive.microsofttranslator. com/translate?api-version=3.0&from=en&to=de&profanityAction=Marked&profanityMarker=Tag" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'This is an <expletive> good idea.'}]"

Последний запрос возвращает:

[
    {
        "translations":[
            {"text":"Das ist eine <profanity>verdammt</profanity> gute Idee.","to":"de"}
        ]
    }
]

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

Обычно переводят содержимое, которое включает разметку, например содержимое HTML-страницы или содержимое XML-документа. Включите параметр запроса textType=html при переводе содержимого с тегами. Кроме того, иногда бывает полезно исключить из перевода конкретное содержимое. С помощью атрибута class=notranslate можно указать содержимое, которое должно остаться не переведенным. В следующем примере содержимое внутри первого элемента div не будет переведено, в то время как содержимое во втором элементе div будет переведено.

<div>This will not be translated.</div>
<div>This will be translated. </div>

Пример запроса приведен ниже.

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=zh-Hans&textType=html" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'<div class=\"notranslate\">This will not be translated.</div><div>This will be translated.</div>'}]"

Ответ:

[
    {
        "translations":[
            {"text":"<div class=\"notranslate\">This will not be translated.</div><div>这将被翻译。</div>","to":"zh-Hans"}
        ]
    }
]

Получить сведения о выравнивании

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

[[SourceTextStartIndex]:[SourceTextEndIndex]–[TgtTextStartIndex]:[TgtTextEndIndex]] *

Пример строки со сведениями о сопоставлении: 0:0-7:10 1:2-11:20 3:4-0:3 3:4-4:6 5:5-21:21.

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

Чтобы получить сведения о выравнивании, укажите параметр includeAlignment=true в строке запроса.

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=fr&includeAlignment=true" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'The answer lies in machine translation.'}]"

Ответ:

[
    {
        "translations":[
            {
                "text":"La réponse se trouve dans la traduction automatique.",
                "to":"fr",
                "alignment":{"proj":"0:2-0:1 4:9-3:9 11:14-11:19 16:17-21:24 19:25-40:50 27:37-29:38 38:38-51:51"}
            }
        ]
    }
]

Сведения о выравнивании начинаются со строки 0:2-0:1. Это значит, что первые три символа в исходном тексте (The) сопоставляются с двумя первыми символами в переведенном тексте (La).

Ограничения

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

• Выравнивание недоступно для текста в формате HTML, т. е. textType=html.
• Сведения о выравнивании возвращаются только для группы языковых пар:
  • С английского на любой другой язык, за исключением традиционного китайского, кантонского (традиционного) или сербского (кириллица).
  • с японского на корейский или с корейского на японский.
  • с японского на упрощенный китайский и на японский с упрощенного китайского.
  • с упрощенного китайского на традиционный китайский и с традиционного китайского на упрощенный китайский.
• Вы не получите сведения о выравнивании, если предложение является законченным переводом. Примеры таких переводов — «Это тест», «Я люблю тебя» и другие предложения, встречающиеся с высокой частотой.
• Выравнивание недоступно, если вы применяете любой из подходов для предотвращения перевода, как описано здесь.

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

Чтобы получать сведения о длине предложения в исходном тексте и переводе, укажите параметр includeSentenceLength=true в строке запроса.

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=fr&includeSentenceLength=true" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'The answer lies in machine translation. The best machine translation technology cannot always provide translations tailored to a site or users like a human. Simply copy and paste a code snippet anywhere. '}]"

Ответ:

[
    {
        "translations":[
            {
                "text":"La réponse se trouve dans la traduction automatique. La meilleure technologie de traduction automatique ne peut pas toujours fournir des traductions adaptées à un site ou des utilisateurs comme un être humain. Il suffit de copier et coller un extrait de code n'importe où.",
                "to":"fr",
                "sentLen":{"srcSentLen":[40,117,46],"transSentLen":[53,157,62]}
            }
        ]
    }
]

Перевод с помощью динамического словаря

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

В разметке используется следующий синтаксис:

<mstrans:dictionary translation="translation of phrase">phrase</mstrans:dictionary>

Например, рассмотрим следующее русское предложение: «Слово «словоматик» — это словарная запись». Чтобы сохранить при переводе слово словоматик, необходимо отправить запрос:

curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=de" -H "Ocp-Apim-Subscription-Key: <client-secret>" -H "Content-Type: application/json; charset=UTF-8" -d "[{'Text':'The word <mstrans:dictionary translation=\"wordomatic\">wordomatic</mstrans:dictionary> is a dictionary entry.'}]"

Результат:

[
    {
        "translations":[
            {"text":"Das Wort \"wordomatic\" ist ein Wörterbucheintrag.","to":"de"}
        ]
    }
]

Эта возможность динамического словаря работает с textType=text и textType=htmlодинаково. Компонент должен использоваться только в случае необходимости. Соответствующий и гораздо лучший способ настройки перевода — это использование концентратора Custom Translator. Custom Translator обеспечивает полное использование контекста и статистические значения вероятности. Если вы можете создавать учебные данные, которые показывают вашу работу или фразу в контексте, полученные результаты будут гораздо лучше. Узнайте больше о Custom Translator.

Дальнейшие действия

Поработайте с кратким руководством по Переводчику

Translate — Tailwind CSS

​Основное использование

​Перевод элемента

Используйте утилиты translate-x-{amount} и translate-y-{amount} для перевода элемента.

 <изображение>
<изображение>
 

​Использование отрицательных значений

Чтобы использовать отрицательное значение перевода, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.

​Удаление преобразований

Чтобы удалить сразу все преобразования элемента, используйте кнопку transform-none утилита:

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

​Аппаратное ускорение

Если ваш переход работает лучше при рендеринге с помощью графического процессора, а не центрального процессора, вы можете принудительно ускорить аппаратное ускорение, добавив утилиту transform-gpu :

Используйте transform-cpu для принудительного возврата к ЦП, если вам нужно отменить это условно.

---

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:translate-y-12 , чтобы применять утилиту translate-y-12 только при наведении.

 <дел>
  

 <дел>