Özel Altyazı Stilleri

Altyazı stili sayfası yazı tipini, ölçeği, kalınlığı, rengi ve arka plan saydamlığını kapsar. Özel CSS ise o denetimlerin ulaşamadığı her şey için: gerçekten ihtiyacınız olana kadar çeviriyi bulanıklıkla örtmek, altını çizmek, orijinali geri plana itmek veya altyazı kutusunun biçimini değiştirmek.

Yalnızca Read Frog altyazı katmanına uygulanır. Web sayfası çevirisinin kendi ayrı stil sayfası vardır — bkz. Özel Çeviri Stilleri.

Düzenleyiciyi açın

1. Ayarlar → Video Altyazıları'nı açın.
2. Stili özelleştir ile Altyazı stilini açın.
3. Özel CSS'e kadar kaydırın ve açın.
4. CSS'inizi yazın. Düzenleyicinin üstündeki önizleme siz yazdıkça güncellenir.
5. Kaydet'e basın.

Kaydetmek zaten açık olan oynatıcılara da ulaşır; başka bir sekmede bir video açık tutup her kaydedişin sonucunu izleyebilirsiniz. Düzenleyiciyi boşaltıp yeniden kaydederseniz CSS kalkar ve altyazılar yukarıdaki denetimlere geri döner.

Hazır bir şablonla başlayın

Hazır şablon listesinde kullanıma hazır üç blok var. Birini seçtiğinizde mevcut içeriğin yerini almaz, düzenleyicinin sonuna eklenir; yani şablonlar üst üste binebilir: iki tanesini seçerek hem çeviriyi bulanıklaştırıp hem de orijinali soluklaştırabilirsiniz.

Çeviriyi bulanıklaştır

Önce dinleyin, ancak pes ettiğinizde okuyun. İmleç satırın üzerindeyken bulanıklık kalkar.

.subtitles-translation {
  filter: blur(6px);
  transition: filter 0.15s ease;
}

.subtitles-translation:hover {
  filter: none;
}

Çeviriye kesik çizgi

Çeviriyi ana metin değil, yardımcı bilgi olarak işaretler.

.subtitles-translation {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

Orijinali soluklaştır

Orijinal satır durur ama göz ilk oraya kaymaz.

.subtitles-main {
  opacity: 0.6;
}

Kullanabileceğiniz seçiciler

Katman bilinçli olarak küçük tutuldu. Şu üç sınıf adı dışa açık sözün parçasıdır ve yeniden adlandırılmayacaktır:

<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>

Çeviri satırında iki ek tutamak daha var:

• lang ve dir hedef dilinizi izler; bu yüzden hem .subtitles-translation[lang='ja'] hem de .subtitles-translation[dir='rtl'] çalışır.
• Çeviri hâlâ yoldayken data-pending="true" eklenir.

.subtitles-translation[data-pending='true'] {
  opacity: 0.35;
}

Stil denetimleriyle birlikte çalışmak

Arayüzde seçtiğiniz yazı tipi, ölçek, kalınlık ve renk her satıra CSS değişkeni olarak ulaşır; bir stil sayfası kuralı bunları gerçek bildirimlere çevirir. Sizin CSS'iniz o kuraldan sonra enjekte edildiği için sıradan bir bildirim kazanır — !important gerekmez:

.subtitles-translation {
  color: #ffd479;
  font-weight: 600;
}

Zaman harcamadan önce bilinmeye değer iki istisna var.

--rf-subtitle-* değişkenlerini değil, özellikleri ayarlayın

O dört denetimin arkasındaki değişkenler her satıra satır içi yazılır ve satır içi bir bildirim her stil sayfası kuralını geçer. Özel CSS'e --rf-subtitle-color yazmak hiçbir şey yapmaz:

/* Yok sayılır — değişken satır içi ayarlanıyor. */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* Çalışır. */
.subtitles-main { color: #7cf; }

Kutunun arka planı !important ister

Arka plan saydamlığı aynı nedenle kutuya satır içi yazılır; özel CSS'in ısrar etmesi gereken tek yer burasıdır:

.read-frog-subtitles-box {
  background-color: rgba(24, 20, 48, 0.85) !important;
  border-radius: 10px;
  padding: 8px 14px;
}

Kutunun geri kalanı — iç boşluk, köşeler, genişlik, hizalama — düz bir bildirimle olur.

Boyutu px ile değil em ile verin

Katmanın kök yazı tipi boyutu videonun yüksekliğinden türetilir; altyazıların tam ekranda da mini oynatıcıda da orantılı kalmasının nedeni budur. Bir satırdaki 1em "oynatıcının kullanacağı boyut" demektir; px ile verilen boyut donar ve videoyu izlemeyi bırakır.

.subtitles-translation {
  font-size: 1.15em;
}

Daha fazla örnek

Kutuyu kaldırıp metni konturlayın

Aydınlık görüntülerde iyi sonuç verir; orada koyu zemin altyazının kendisinden daha rahatsız edicidir.

.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);
}

Çeviri öne çıksın

Orijinal satırı bir başvuruya küçültür, ağırlığı çeviriye verir.

.subtitles-main {
  font-size: 0.75em;
  opacity: 0.65;
}

.subtitles-translation {
  font-size: 1.1em;
  font-weight: 600;
}

Uzun satırları sola hizalayın

Altyazı üç satıra taştığında ortalı hizalamayı okumak zorlaşır.

.read-frog-subtitles-box {
  max-width: 70%;
  text-align: left;
}

Dile göre tipografi

Birden fazla hedef dilde okuyup her birinin düzgün görünmesini istiyorsanız işe yarar.

.subtitles-translation[lang='ja'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.subtitles-translation[dir='rtl'] {
  font-size: 1.05em;
}

Kapsam ve sınırlar

Katman, oynatıcının içindeki bir shadow root'ta çizilir. CSS'inizin sayfaya sızmamasını sağlayan bu sınırdır — sessizce hiçbir şey yapmayanları belirleyen de odur:

• Çalışır ve katmanın içinde kalır: @keyframes, @media, @supports, geçişler, sözde sınıflar ve kendi tanımladığınız CSS değişkenleri.
• Yok sayılır: @font-face ve @property. Bir shadow root ikisini de kaydedemez; kendi yazı tipinizi yüklemek yerine sistemde hazır olanlardan seçin.
• Hiçbir şeyle eşleşmez: :root ve body. Katmanın içinde sayfa düzeyinde bir öğe yoktur — yukarıdaki üç sınıfı kullanın.
• Erişilemez: YouTube oynatıcısının denetimleri, arkasındaki sayfa ve yerleşik altyazılar. Özel CSS, altyazı katmanının dışındaki hiçbir şeye stil veremez.
• Boyut sınırı: 8 KB. Düzenleyici siz yazarken söz dizimini denetler ve CSS geçersiz ya da çok uzunken Kaydet'i engeller.

/* Animasyonlar sorunsuz ve dışarı taşmaz. */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.subtitles-translation {
  animation: rf-fade-in 0.2s ease-out;
}

Sorun giderme

• Kaydettikten sonra hiçbir şey değişmedi: durum satırının CSS geçerli, düğmenin Kaydedildi dediğini doğrulayın, sonra kuralın üç sınıf adından birini hedeflediğine bakın.
• Kutuya verilen arka plan rengi yok sayılıyor: !important ekleyin. Saydamlık denetimi o özelliği satır içi yazıyor.
• --rf-subtitle-* üzerine yazmak işe yaramıyor: bunun yerine doğrudan color, font-size, font-family veya font-weight verin.
• Tam ekranda metin boyutu sıçrıyor: o font-size değerini px yerine em yapın.
• Bir yazı tipi hiç uygulanmıyor: @font-face katmanın içinde çalışmaz; sistemde kurulu bir yazı tipi kullanın.
• Kaydet devre dışı: düzenleyici bir söz dizimi hatası buldu ya da stil sayfası 8 KB'ı aşıyor.
• Katman bozuk görünüyor: düzenleyiciyi boşaltıp kaydedin. CSS anında kalkar ve stil denetimleri yeniden devralır.

Özel CSS diğer ayarlarınızla birlikte saklanır, dolayısıyla yapılandırma dışa aktarımıyla birlikte taşınır — bkz. Yapılandırma, Eşitleme ve Yedekler. Katmanla ilgili geri kalan her şey için Video Altyazıları sayfasına bakın.