Skip to content

Commit

Permalink
ko: Format various docs using Prettier (#14766)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 30, 2023
1 parent 09d874c commit b96d6e1
Show file tree
Hide file tree
Showing 4 changed files with 274 additions and 205 deletions.
19 changes: 11 additions & 8 deletions files/ko/web/accessibility/aria/index.md
View file
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
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

0 comments on commit b96d6e1

Please sign in to comment.