Skip to content

Commit

Permalink
Merge branch 'master' into update/web-html-element-script-type-specul…
Browse files Browse the repository at this point in the history
…ationrules
  • Loading branch information
undead404 committed Dec 20, 2024
2 parents 4cc6980 + f1858fb commit 5a29260
Show file tree
Hide file tree
Showing 118 changed files with 1,084 additions and 575 deletions.
122 changes: 122 additions & 0 deletions CHANGELOG.md

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions en_spelling_additions.txt
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,5 @@ UNSC
Vorbis
webdoky
WHATWG
Yari
ZWNBSP
2 changes: 1 addition & 1 deletion files/uk/glossary/accessible_name/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ page-type: glossary-definition

Для частини елементів доступна назва походить від атрибутів; наприклад, атрибута `alt` у разі {{HTMLElement("img")}}. Для зображення `<img src="grape.jpg" alt="банан"/>` доступна назва – це "банан".

Щоб утворити зв'язування між видимим вмістом і елементом або кількома текстовими вузлами та елементом, можна скористатися атрибутом [`aria-labeledby`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). Якщо немає видимого тексту, який можна було б зв'язати з елементом UI, якому потрібна доступна назва, може бути використаний атрибут [`aria-label`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-label). Назви не повинні додаватися до елементів, що розмічають текст, наприклад, {{HTMLElement("code")}}, {{HTMLElement("del")}} і {{HTMLElement("mark")}}.
Щоб утворити зв'язування між видимим вмістом і елементом або кількома текстовими вузлами та елементом, можна скористатися атрибутом [`aria-labelledby`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). Якщо немає видимого тексту, який можна було б зв'язати з елементом UI, якому потрібна доступна назва, може бути використаний атрибут [`aria-label`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-label). Назви не повинні додаватися до елементів, що розмічають текст, наприклад, {{HTMLElement("code")}}, {{HTMLElement("del")}} і {{HTMLElement("mark")}}.

Багатьом елементам, наприклад, розділам текстового вмісту, доступна назва не потрібна. Усі контрольні елементи повинні мати доступні назви. Усі зображення, що доносять інформацію та не є суто декоративними, також повинні їх мати.

Expand Down
66 changes: 14 additions & 52 deletions files/uk/glossary/base64/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,21 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Це означає, що версія рядка чи файлу в Base64 зазвичай приблизно на третину більша за вихідні дані (точний приріст розміру залежить від різних факторів, таких як абсолютна довжина рядка, остача від ділення його довжини на 3 та те, чи використовуються символи відступу).

## Остання порція

Рядок base64 можна поділити на чотирисимвольні порції, де в останній порції може бути менш як 4 символів. Ця порція може бути доповнена символами `=`, щоб складатися рівно з 4 символів. Коли не рахувати символи доповнення, остання порція може бути чимось із наступного:

- 2 символи: кодує 12 бітів, що представляють 1 байт (8 бітів) даних
- 3 символи: кодує 18 бітів, що представляють 2 байти (16 байтів) даних
- 4 символи: кодує 24 біти, що представляють 3 байти (24 біти) даних

У перших двох випадках символи можуть мати додаткові 4 або 2 додаткові біти в кінці, що не представляють жодних даних. У такому разі [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648#section-3.5) вимагає, аби кодувальники задавали в цих бітах нулі, а декодувальники – (необов'язково) викидали помилку, коли в цих бітах не нулі. Наприклад, якщо закодовані дані є одним байтом `0b01010101`, де другий символ має 4 біти в кінці, задані нулями. Декодування `VR==` (де другий символ представляє `0b010001`) технічно призводить до того самого байта `0b01010101`, проте декодувальник може викинути помилку, адже біти в кінці – не нульові.

## Підтримка в JavaScript

Для розкодування та кодування рядків Base64 браузери надають дві функції JavaScript:
Клас {{jsxref("Uint8Array")}} пропонує для перетворення даних на та із base64 методи {{jsxref("Uint8Array.fromBase64()")}}, {{jsxref("Uint8Array.prototype.toBase64()")}} і {{jsxref("Uint8Array.prototype.setFromBase64()")}}.

Також для розкодування та кодування рядків Base64 браузери надають дві функції JavaScript:

- {{domxref("Window.btoa()")}} (також {{domxref("WorkerGlobalScope.btoa()", "доступна у воркерах", "", "nocode")}}) – створює рядок ASCII, закодований Base64, з рядка двійкових даних ("btoa" слід читати як "binary to ASCII", "двійкове в ASCII").
- {{domxref("Window.atob()")}} (також {{domxref("WorkerGlobalScope.atob()", "доступна у воркерах", "", "nocode")}}) – розкодовує рядок, закодований Base64 ("atob" слід читати як "ASCII to binary", "ASCII у двійкове").
Expand All @@ -40,62 +52,12 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/
>
> Проте відповідність між байтами та кодовими точками надійно виконується лише для кодових точок до `0x7f`. Крім того, кодові точки понад `0xff` призведуть до викидання помилки `btoa`, через перевищення максимального значення для 1 байта. Наступний розділ детально описує, як обійти це обмеження при кодуванні довільного тексту Unicode.
## "Проблема Unicode"

Оскільки `btoa` тлумачить кодові точки вихідного рядка як значення байтів, виклик `btoa` для рядка призведе до викидання помилки "Character Out Of Range" ("символ поза допустимим діапазоном"), якщо кодова точка символу перевищує `0xff`. Для випадків використання, де потрібно закодувати довільний текст Unicode, необхідно спочатку перетворити рядок на його складові байти в {{glossary("UTF-8")}}, а потім закодувати ці байти.

Найпростіше рішення – використати `TextEncoder` і `TextDecoder` для перетворення між UTF-8 та однобайтовими представленнями рядка:

```js
function base64ToBytes(base64) {
const binString = atob(base64);
return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

function bytesToBase64(bytes) {
const binString = Array.from(bytes, (byte) =>
String.fromCodePoint(byte),
).join("");
return btoa(binString);
}

// Usage
bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"
```

## Перетворення довільних двійкових даних

Функції `bytesToBase64` та `base64ToBytes` з попереднього розділу можна використовувати безпосередньо для перетворення між рядками Base64 і [`Uint8Array`](/uk/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array).

Задля кращої швидкодії асинхронне перетворення між URL з даними Base64 можна виконувати безпосередньо у вебплатформі за допомогою API [`FileReader`](/uk/docs/Web/API/FileReader) і [`fetch`](/uk/docs/Web/API/Fetch_API):

```js
async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") {
return await new Promise((resolve, reject) => {
const reader = Object.assign(new FileReader(), {
onload: () => resolve(reader.result),
onerror: () => reject(reader.error),
});
reader.readAsDataURL(new File([bytes], "", { type }));
});
}

async function dataUrlToBytes(dataUrl) {
const res = await fetch(dataUrl);
return new Uint8Array(await res.arrayBuffer());
}

// Використання
await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC"
await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2]
```

## Дивіться також

- API JavaScript:
- {{domxref("Window.atob()")}} (також {{domxref("WorkerGlobalScope.atob()", "доступна у воркерах", "", "nocode")}})
- {{domxref("Window.btoa()")}} (також {{domxref("WorkerGlobalScope.btoa()", "доступна у воркерах", "", "nocode")}})
- {{jsxref("Uint8Array")}}
- [URL даних](/uk/docs/Web/URI/Schemes/data)
- [Base64](https://uk.wikipedia.org/wiki/Base64) на Вікіпедії
- Алгоритм Base64, описаний у [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648)
4 changes: 0 additions & 4 deletions files/uk/glossary/baseline/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,3 @@ page-type: glossary-disambiguation
Термін **базова лінія**, або **база**, може мати кілька значень, залежно від контексту. Він може означати:

{{GlossaryDisambiguation}}

## Дивіться також

- [Baseline](https://en.wikipedia.org/wiki/Baseline) на Wikipedia
9 changes: 6 additions & 3 deletions files/uk/glossary/baseline/typography/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ page-type: glossary-definition

{{GlossarySidebar}}

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

{{GlossaryDisambiguation}}
**Алфавітна базова лінія** – це значення ключового слова CSS `baseline`. Низ більшості алфавітних гліфів здебільшого вирівнюється щодо алфавітної базової лінії; більшість символів європейських та західноазійських шрифтів лежить _згори_ алфавітної базової лінії.

Інші системи письма мають інакші базові лінії. Наприклад, тибетське письмо та інші однорегістрові письмові системи з важливим, але не абсолютним верхнім краєм вирівнюються до низу базової лінії, що "висить". Східноазійські письмові системи не мають базової лінії; кожний гліф лежить у квадратній рамці, й виносних елементів немає. Східноазійські символи, коли вони змішані з письмом, що має базову лінію знизу, слід розміщувати так, щоб низ символу був між базовою лінією та висотою нижніх виносних елементів.

## Дивіться також

- [Вирівнювання рамок CSS](/uk/docs/Web/CSS/CSS_box_alignment#typy-vyrivniuvannia)
- Модуль [Рядного компонування CSS](/uk/docs/Web/CSS/CSS_inline_layout)
- [Базова лінія шрифту](https://uk.wikipedia.org/wiki/%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0_%D0%BB%D1%96%D0%BD%D1%96%D1%8F_%D1%88%D1%80%D0%B8%D1%84%D1%82%D1%83) на Вікіпедії
- [Вирівнювання рамок CSS](/uk/docs/Web/CSS/CSS_box_alignment#typy-vyrivniuvannia) на WebDoky
9 changes: 6 additions & 3 deletions files/uk/glossary/block-level_content/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ page-type: glossary-definition
При блоковому компонуванні рамки розкладаються одна після одної, вертикально, починаючи від верхнього краю контейнерного блока. Ліва зовнішня грань кожної рамки торкається лівого краю контейнерного блока.\
Елемент блокового рівня завжди починається з нового рядка. При горизонтальному письмі, наприклад, в англійській мові або івриті, такий блок займає ввесь простір по горизонталі свого батьківського елемента (контейнера) та простір по вертикалі, рівний висоті його вмісту, таким чином утворюючи "блок".

> **Примітка:** Поведінка блокового компонування, описана вище, змінюється, якщо [`writing-mode`](/uk/docs/Web/CSS/writing-mode) контейнерного блока має значення, відмінне від [усталеного значення](/uk/docs/Web/CSS/writing-mode#formalne-vyznachennia).
> [!NOTE]
> Поведінка блокового компонування, описана вище, змінюється, якщо [`writing-mode`](/uk/docs/Web/CSS/writing-mode) контейнерного блока має значення, відмінне від [усталеного значення](/uk/docs/Web/CSS/writing-mode#formalne-vyznachennia).
> **Примітка:** Історично елементи HTML (_HyperText Markup Language_ – мови розмітки гіпертексту) були категоризовані як елементи "блокового рівня" або "рядкові" елементи. Як характеристика представлення, це тепер визначається мовою CSS.
> [!NOTE]
> Історично елементи HTML (_HyperText Markup Language_ – мови розмітки гіпертексту) були категоризовані як елементи "блокового рівня" або "рядкові" елементи. Як характеристика представлення, це тепер визначається мовою CSS.
## Приклади

Expand Down Expand Up @@ -41,7 +43,8 @@ p {

## Дивіться також

- [Вміст рядкового рівня](/uk/docs/Glossary/Inline-level_content)
- Споріднені терміни глосарія
- {{glossary("Inline-level content", "Вміст рядкового рівня")}}
- [Контекст блокового форматування](/uk/docs/Web/CSS/CSS_display/Block_formatting_context)
- {{cssxref("display")}}
- [`writing-mode`](/uk/docs/Web/CSS/writing-mode)
Loading

0 comments on commit 5a29260

Please sign in to comment.