사용자 지정 자막 스타일
직접 쓴 CSS로 동영상 자막을 다듬기 — 번역문 흐리게, 원문 연하게, 자막 상자 새로 꾸미기.
자막 스타일 페이지에서는 글꼴, 크기, 굵기, 색상, 배경 불투명도를 정할 수 있습니다. 사용자 지정 CSS는 그 조절기가 닿지 않는 부분을 맡습니다. 정말 필요할 때까지 번역문을 흐리게 덮어 두기, 밑줄 긋기, 원문을 뒤로 물리기, 자막 상자 모양을 바꾸기 같은 것들입니다.
적용 대상은 Read Frog 자막 오버레이뿐입니다. 웹페이지 번역에는 별도의 스타일시트가 있습니다 — 사용자 정의 번역 스타일을 참고하세요.
편집기 열기
- 설정 → 비디오 자막을 엽니다.
- 스타일 편집으로 자막 스타일을 엽니다.
- 사용자 지정 CSS까지 스크롤해 엽니다.
- CSS를 작성합니다. 편집기 위의 미리보기가 입력에 맞춰 갱신됩니다.
- 저장을 누릅니다.
저장은 이미 열려 있는 플레이어에도 전달되므로, 다른 탭에 동영상을 띄워 둔 채 저장할 때마다 결과를 확인할 수 있습니다. 편집기를 비우고 다시 저장하면 CSS가 제거되고 자막은 위의 조절기로 돌아갑니다.
프리셋 템플릿으로 시작하기
프리셋 템플릿 드롭다운에는 바로 쓸 수 있는 블록 세 개가 있습니다. 하나를 고르면 기존 내용을 지우지 않고 편집기 끝에 덧붙여집니다. 그래서 겹쳐 쓸 수 있습니다. 두 개를 고르면 번역문을 흐리게 하면서 동시에 원문을 연하게 만들 수 있습니다.
번역문 흐리게
먼저 듣고, 포기했을 때만 읽습니다. 포인터를 그 줄에 올리면 흐림이 걷힙니다.
.subtitles-translation {
filter: blur(6px);
transition: filter 0.15s ease;
}
.subtitles-translation:hover {
filter: none;
}번역문 점선
번역문을 본문이 아니라 보조 정보로 표시합니다.
.subtitles-translation {
text-decoration: underline dashed;
text-decoration-thickness: 1px;
text-underline-offset: 0.25em;
}원문 연하게
원문은 그대로 두되, 시선이 먼저 그쪽으로 가지 않게 합니다.
.subtitles-main {
opacity: 0.6;
}사용할 수 있는 선택자
오버레이는 일부러 작게 만들었습니다. 다음 세 클래스 이름은 공개된 약속이며 바뀌지 않습니다.
<div class="read-frog-subtitles-box">
<div class="subtitles-main">Mr. Kamiya isn't confronting the world…</div>
<div class="subtitles-translation" lang="zh" dir="ltr">神谷先生…</div>
</div>| 선택자 | 해당하는 요소 |
|---|---|
.read-frog-subtitles-box | 두 줄이 담기는 상자 — 배경, 여백, 모서리, 너비, 정렬 |
.subtitles-main | 원문 줄 |
.subtitles-translation | 번역문 줄 |
번역문 줄에는 두 가지 단서가 더 있습니다.
lang과dir은 목표 언어를 따르므로.subtitles-translation[lang='ja']와.subtitles-translation[dir='rtl']모두 동작합니다.- 번역문이 아직 오는 중이면
data-pending="true"가 붙습니다.
.subtitles-translation[data-pending='true'] {
opacity: 0.35;
}DOM에서는 항상 원문이 먼저입니다. 번역 위치는 order로 보이는 순서만 바꿉니다. :first-child 대신 클래스 이름으로 지정하세요.
스타일 설정과 함께 쓰기
화면에서 고른 글꼴, 크기, 굵기, 색상은 CSS 변수로 각 줄에 전달되고, 스타일시트 규칙이 이를 실제 선언으로 바꿉니다. 여러분의 CSS는 그 규칙 뒤에 주입되므로 평범한 선언만으로 이깁니다 — !important는 필요 없습니다.
.subtitles-translation {
color: #ffd479;
font-weight: 600;
}시간을 들이기 전에 알아 둘 예외가 둘 있습니다.
--rf-subtitle-* 변수 말고 속성을 지정하세요
그 네 가지 설정 뒤의 변수는 각 줄에 인라인으로 적혀 있고, 인라인 선언은 모든 스타일시트 규칙보다 우선합니다. 사용자 지정 CSS에 --rf-subtitle-color를 써도 아무 일도 일어나지 않습니다.
/* 무시됩니다 — 이 변수는 인라인으로 설정됩니다. */
.subtitles-main { --rf-subtitle-color: #7cf; }
/* 동작합니다. */
.subtitles-main { color: #7cf; }상자 배경에는 !important가 필요합니다
배경 불투명도도 같은 이유로 상자에 인라인으로 적혀 있습니다. 사용자 지정 CSS가 강하게 나가야 하는 곳은 여기뿐입니다.
.read-frog-subtitles-box {
background-color: rgba(24, 20, 48, 0.85) !important;
border-radius: 10px;
padding: 8px 14px;
}상자의 나머지 — 여백, 모서리, 너비, 정렬 — 는 평범한 선언으로 충분합니다.
크기는 px가 아니라 em으로
오버레이의 루트 글꼴 크기는 동영상 높이에서 계산됩니다. 전체 화면이나 미니 플레이어에서도 자막 비율이 유지되는 이유입니다. 줄에 쓴 1em은 "플레이어가 원래 쓸 크기"를 뜻하고, px로 쓰면 고정되어 동영상을 따라가지 않습니다.
.subtitles-translation {
font-size: 1.15em;
}더 많은 예시
상자를 없애고 글자에 테두리 주기
밝은 영상에 알맞습니다. 이럴 때는 어두운 판이 자막보다 더 거슬립니다.
.read-frog-subtitles-box {
background-color: transparent !important;
}
.subtitles-main,
.subtitles-translation {
text-shadow:
0 0 4px rgba(0, 0, 0, 0.95),
0 1px 3px rgba(0, 0, 0, 0.9);
}번역문을 앞세우기
원문은 참고용으로 줄이고, 무게는 번역문에 싣습니다.
.subtitles-main {
font-size: 0.75em;
opacity: 0.65;
}
.subtitles-translation {
font-size: 1.1em;
font-weight: 600;
}긴 줄은 왼쪽 정렬
자막이 세 줄로 넘어가면 가운데 정렬은 읽기 어렵습니다.
.read-frog-subtitles-box {
max-width: 70%;
text-align: left;
}언어별 서체
여러 목표 언어로 읽으면서 각각을 보기 좋게 하고 싶을 때 유용합니다.
.subtitles-translation[lang='ja'] {
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.subtitles-translation[dir='rtl'] {
font-size: 1.05em;
}범위와 한계
오버레이는 플레이어 안의 shadow root에서 그려집니다. 이 경계 덕분에 CSS가 페이지로 새지 않으며, 무엇이 조용히 무효가 되는지도 이 경계가 정합니다.
- 동작하고, 오버레이 안에 머무는 것:
@keyframes,@media,@supports, 트랜지션, 의사 클래스, 직접 정의한 CSS 변수. - 무시되는 것:
@font-face와@property. shadow root는 둘 다 등록할 수 없으므로, 직접 불러오지 말고 시스템에 있는 글꼴을 고르세요. - 아무것도 맞지 않는 것:
:root와body. 오버레이 안에는 페이지 수준 요소가 없습니다 — 위의 세 클래스를 쓰세요. - 닿지 않는 것: YouTube 플레이어의 컨트롤, 그 뒤의 페이지, 기본 자막. 사용자 지정 CSS는 자막 오버레이 바깥을 꾸밀 수 없습니다.
- 크기 제한: 8 KB. 편집기는 입력하는 동안 구문을 검사하고, CSS가 잘못되었거나 너무 길면 저장을 막습니다.
/* 애니메이션은 괜찮고, 바깥으로 나가지 않습니다. */
@keyframes rf-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.subtitles-translation {
animation: rf-fade-in 0.2s ease-out;
}문제 해결
- 저장했는데 아무것도 안 바뀜: 상태가 CSS가 유효합니다, 버튼이 저장됨인지 확인하고, 규칙이 세 클래스 이름 중 하나를 겨냥하는지 보세요.
- 상자에 준 배경색이 무시됨:
!important를 붙이세요. 불투명도 조절기가 그 속성을 인라인으로 씁니다. --rf-subtitle-*덮어쓰기가 무시됨: 대신color,font-size,font-family,font-weight를 직접 지정하세요.- 전체 화면에서 글자 크기가 튐: 그
font-size를px에서em으로 바꾸세요. - 글꼴이 전혀 적용되지 않음:
@font-face는 오버레이 안에서 동작하지 않습니다. 시스템에 설치된 글꼴을 쓰세요. - 저장이 비활성화됨: 편집기가 구문 오류를 찾았거나 스타일시트가 8 KB를 넘었습니다.
- 오버레이가 망가져 보임: 편집기를 비우고 저장하세요. CSS가 즉시 제거되고 스타일 설정이 다시 맡습니다.
사용자 지정 CSS는 다른 설정과 함께 저장되므로 설정 내보내기에 포함됩니다 — 설정, 동기화 및 백업을 참고하세요. 오버레이의 나머지 내용은 동영상 자막에 있습니다.