OSX의 동적 너비 HTML5 텍스트 트랙

자막이 HTML5 비디오 플레이어 창의 100% 너비를 차지하는 경우를 본 적이 있다면 OSX의 크롬이나 사파리에서 흔히 볼 수 있는 깔끔한 스타일 팁:
::-webkit-media-text-track-display {
  // prevent subtitles from taking up 100% width
  // while remaining centered
  width: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  // prevent unexpected line breaks, since the  
  // above styling will otherwise force 50% width
  // on the subtitle element
  white-space: pre;
}
이 코드는 부제목 요소를 가운데로 배치하여 동적 폭을 유지하고 의외의 줄 바꿈을 방지합니다.
복구 프로그램은 본 컴퓨터의 자막을 유지하기 때문에 운영체제 수준의 접근 가능한 옵션을 적용할 수 있습니다.

좋은 웹페이지 즐겨찾기