Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ko: Format various docs using Prettier #14766

Merged
merged 1 commit into from
Jul 30, 2023
Merged

ko: Format various docs using Prettier #14766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions files/ko/web/accessibility/aria/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,30 @@ ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상
다음은 진행 표시줄 위젯의 마크업입니다.

```html
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">
</div>
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>
```

This progress bar is built using a `<div>`, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the `role="progressbar"` attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values for the progress bar, and the `aria-valuenow` describes the current state of it and therefore must be kept updated with JavaScript. Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:

```js
`// Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");`
// Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");

`// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.`
// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.`;
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
progressBar.setAttribute("aria-valuenow", percentComplete);
}
```

Expand Down
217 changes: 125 additions & 92 deletions .../audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,24 @@ HTML5에서는 {{ htmlelement("track") }}를 이용하여 자막을 특정해서

```html
<video id="video" controls preload="metadata">
<source src="video/sintel-short.mp4" type="video/mp4">
<source src="video/sintel-short.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
<track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
<source src="video/sintel-short.mp4" type="video/mp4" />
<source src="video/sintel-short.webm" type="video/webm" />
<track
label="English"
kind="subtitles"
srclang="en"
src="captions/vtt/sintel-en.vtt"
default />
<track
label="Deutsch"
kind="subtitles"
srclang="de"
src="captions/vtt/sintel-de.vtt" />
<track
label="Español"
kind="subtitles"
srclang="es"
src="captions/vtt/sintel-es.vtt" />
</video>
```

Expand All @@ -66,18 +79,32 @@ In addition to adding the `<track>` elements, we have also added a new button to

```js
<div id="video-controls" class="controls" data-state="hidden">
<button id="playpause" type="button" data-state="play">Play/Pause</button>
<button id="stop" type="button" data-state="stop">Stop</button>
<div class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</div>
<button id="mute" type="button" data-state="mute">Mute/Unmute</button>
<button id="volinc" type="button" data-state="volup">Vol+</button>
<button id="voldec" type="button" data-state="voldown">Vol-</button>
<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
<button id="subtitles" type="button" data-state="subtitles">CC</button>
<button id="playpause" type="button" data-state="play">
Play/Pause
</button>
<button id="stop" type="button" data-state="stop">
Stop
</button>
<div class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</div>
<button id="mute" type="button" data-state="mute">
Mute/Unmute
</button>
<button id="volinc" type="button" data-state="volup">
Vol+
</button>
<button id="voldec" type="button" data-state="voldown">
Vol-
</button>
<button id="fs" type="button" data-state="go-fullscreen">
Fullscreen
</button>
<button id="subtitles" type="button" data-state="subtitles">
CC
</button>
</div>
```

Expand All @@ -89,14 +116,14 @@ No image is used for the captions button, so it is simply styled as:

```css
.controls button[data-state="subtitles"] {
height:85%;
text-indent:0;
font-size:16px;
font-size:1rem;
font-weight:bold;
color:#666;
background:#000;
border-radius:2px;
height: 85%;
text-indent: 0;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
color: #666;
background: #000;
border-radius: 2px;
}
```

Expand All @@ -113,14 +140,14 @@ Browsers do vary as to what they support, so we will be attempting to bring a mo
As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:

```js
var subtitles = document.getElementById('subtitles');
var subtitles = document.getElementById("subtitles");
```

We also initially turn off all subtitles, in case the browser turns any of them on by default:

```js
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
video.textTracks[i].mode = "hidden";
}
```

Expand All @@ -139,14 +166,20 @@ All we need to do is to go through the video's `textTracks`, reading their prope
```js
var subtitlesMenu;
if (video.textTracks) {
var df = document.createDocumentFragment();
var subtitlesMenu = df.appendChild(document.createElement('ul'));
subtitlesMenu.className = 'subtitles-menu';
subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
for (var i = 0; i < video.textTracks.length; i++) {
subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
}
videoContainer.appendChild(subtitlesMenu);
var df = document.createDocumentFragment();
var subtitlesMenu = df.appendChild(document.createElement("ul"));
subtitlesMenu.className = "subtitles-menu";
subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off"));
for (var i = 0; i < video.textTracks.length; i++) {
subtitlesMenu.appendChild(
createMenuItem(
"subtitles-" + video.textTracks[i].language,
video.textTracks[i].language,
video.textTracks[i].label,
),
);
}
videoContainer.appendChild(subtitlesMenu);
}
```

Expand All @@ -156,37 +189,36 @@ The creation of each list item and button is done by the `createMenuItem()` func

```js
var subtitleMenuButtons = [];
var createMenuItem = function(id, lang, label) {
var listItem = document.createElement('li');
var button = listItem.appendChild(document.createElement('button'));
button.setAttribute('id', id);
button.className = 'subtitles-button';
if (lang.length > 0) button.setAttribute('lang', lang);
button.value = label;
button.setAttribute('data-state', 'inactive');
button.appendChild(document.createTextNode(label));
button.addEventListener('click', function(e) {
// Set all buttons to inactive
subtitleMenuButtons.map(function(v, i, a) {
subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
});
// Find the language to activate
var lang = this.getAttribute('lang');
for (var i = 0; i < video.textTracks.length; i++) {
// For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
if (video.textTracks[i].language == lang) {
video.textTracks[i].mode = 'showing';
this.setAttribute('data-state', 'active');
}
else {
video.textTracks[i].mode = 'hidden';
}
var createMenuItem = function (id, lang, label) {
var listItem = document.createElement("li");
var button = listItem.appendChild(document.createElement("button"));
button.setAttribute("id", id);
button.className = "subtitles-button";
if (lang.length > 0) button.setAttribute("lang", lang);
button.value = label;
button.setAttribute("data-state", "inactive");
button.appendChild(document.createTextNode(label));
button.addEventListener("click", function (e) {
// Set all buttons to inactive
subtitleMenuButtons.map(function (v, i, a) {
subtitleMenuButtons[i].setAttribute("data-state", "inactive");
});
// Find the language to activate
var lang = this.getAttribute("lang");
for (var i = 0; i < video.textTracks.length; i++) {
// For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
if (video.textTracks[i].language == lang) {
video.textTracks[i].mode = "showing";
this.setAttribute("data-state", "active");
} else {
video.textTracks[i].mode = "hidden";
}
subtitlesMenu.style.display = 'none';
});
subtitleMenuButtons.push(button);
return listItem;
}
}
subtitlesMenu.style.display = "none";
});
subtitleMenuButtons.push(button);
return listItem;
};
```

This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's `mode` attribute to `showing`, and setting the others to `hidden`.
Expand All @@ -196,10 +228,11 @@ Once the menu is built, it is then inserted into the DOM at the bottom of the vi
Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:

```js
subtitles.addEventListener('click', function(e) {
if (subtitlesMenu) {
subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
}
subtitles.addEventListener("click", function (e) {
if (subtitlesMenu) {
subtitlesMenu.style.display =
subtitlesMenu.style.display == "block" ? "none" : "block";
}
});
```

Expand All @@ -209,31 +242,31 @@ We also added some rudimentary styling for the newly created subtitles menu:

```css
.subtitles-menu {
display:none;
position:absolute;
bottom:14.8%;
right:20px;
background:#666;
list-style-type:none;
margin:0;
padding:0;
width:100px;
padding:10px;
display: none;
position: absolute;
bottom: 14.8%;
right: 20px;
background: #666;
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
padding: 10px;
}

.subtitles-menu li {
padding:0;
text-align:center;
padding: 0;
text-align: center;
}

.subtitles-menu li button {
border:none;
background:#000;
color:#fff;
cursor:pointer;
width:90%;
padding:2px 5px;
border-radius:2px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
width: 90%;
padding: 2px 5px;
border-radius: 2px;
}
```

Expand All @@ -257,7 +290,7 @@ For example, to change the text colour of the text track cues you can write:

```css
::cue {
color:#ccc;
color: #ccc;
}
```

Expand All @@ -272,9 +305,9 @@ If the WebVTT file uses [voice spans](http://dev.w3.org/html5/webvtt/#dfn-webvtt
Then this specific 'voice' will be stylable like so:

```css
::cue(v[voice='Test']) {
color:#fff;
background:#0095dd;
::cue(v[voice="Test"]) {
color: #fff;
background: #0095dd;
}
```

Expand Down
Loading