Özel Çeviri Stilleri

Genel Bakış

Read Frog, kendi CSS stillerinizi kullanarak çevirilerin web sayfalarında nasıl görüneceğini özelleştirmenize olanak tanır. Bu size renkler, arka planlar, kenarlıklar, animasyonlar ve daha fazlası üzerinde tam kontrol sağlar.

Stilleri genel olarak tüm çevirilere uygulayabilir veya belirli dilleri ve metin yönlerini hedefleyebilirsiniz. Örneğin Çince, Japonca ve Korece çeviriler için farklı yazı tipleri kullanabilir veya Arapça ve İbranice gibi sağdan sola yazılan diller için düzeni ayarlayabilirsiniz.

Özel CSS Etkinleştirme

Read Frog ayarlarını aç
Çeviri → Çeviri Görüntüleme Stili'ne gidin
"Özel Stil Kullan"ı AÇIK konumuna getirin
CSS düzenleyicisi varsayılan şablonla görünecektir

CSS Seçiciler

Temel Seçici

Tüm özel stiller belirli seçiciyi hedeflemelidir:

[data-read-frog-custom-translation-style='custom'] {
  /* Your styles here */
}

Bu seçici sayfadaki tüm çevrilmiş metin öğelerine uygulanır.

Paketleyici Seçici

Çevrilmiş içerik, dil ve yön niteliklerine sahip bir kapsayıcıya sarılır:

<span class="read-frog-translated-content-wrapper" lang="zh" dir="ltr">
  <span data-read-frog-custom-translation-style="custom">神谷先生...</span>
</span>

Belirli dilleri veya yönleri hedefleyebilirsiniz:

/* Target Chinese translations */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for Chinese */
}

/* Target RTL languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for right-to-left text */
}

Düzenleyici Özellikleri

Sözdizimi Vurgulama

Düzenleyici CodeMirror 6'yı kullanarak şunları sağlar:

Renk kodlu CSS sözdizimi
Satır numaraları
Büyük stil sayfaları için kod katlama
Otomatik girinti

Renk Seçici

Etkileşimli bir renk seçiciyi açmak için düzenleyicide herhangi bir renk değerini tıklayın:

#FF5733, rgb(255, 87, 51) veya hsl(9, 100%, 60%) gibi renk değerlerine tıklayın
Görsel seçici anında belirir
Kaydırıcıları veya giriş alanlarını kullanarak ayarlama yapın
Değişiklikler gerçek zamanlı olarak güncellenir

Desteklenen renk formatları:

Onaltılık: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
Adlandırılmış renkler: tomato, skyblue, gold
CSS değişkenler: var(--my-color)

Canlı Doğrulama

Düzenleyici kaydetmeden önce CSS dosyanızı doğrular:

Geçerli (Yeşil): CSS sözdizimsel olarak doğru, kaydedilmeye hazır
Doğrulanıyor (Gri): Değişiklikleriniz kontrol ediliyor (500 ms geri dönme)
Hata (Kırmızı): Hata mesajıyla birlikte sözdizimi hatası algılandı

Doğrulama kontrolleri:

Sözdizimi hataları (yazım hataları, eksik parantez)
Mülk adı geçerliliği
Seçici doğruluğu
Boyut sınırları (maksimum 8 KB)

Temel CSS Örnekleri

'@/components/css-style-preview''den dosyasını içe aktar

Basit Yazı Tipi Rengi

[data-read-frog-custom-translation-style='custom'] {
  color: blue;
}

Bordürlü

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: #F2E3BC;
  padding: 2px 4px;
  border-radius: 4px;
  border-left: 3px solid #FFD700;
}

Cesur Çalışma Modu

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

İleri Teknikler

Özel Yazı Tipleri

Tüm çevirilerin yazı tipini değiştirin:

[data-read-frog-custom-translation-style='custom'] {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  color: #2c3e50;
}

Dile Özgü Stil

Paketleyicinin lang özelliğini kullanarak belirli dillerdeki çevirileri hedefleyin:

/* Chinese translations with traditional serif font */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "华文楷体", serif;
  color: #8B4513;
}

/* Japanese translations */
.read-frog-translated-content-wrapper[lang='ja'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* Korean translations */
.read-frog-translated-content-wrapper[lang='ko'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Nanum Myeongjo", "Batang", serif;
}

Yöne Özel Şekillendirme

Çevirileri metin yönüne göre biçimlendirin (Arapça, İbranice gibi RTL dilleri için kullanışlıdır):

/* Right-to-left languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  border-right: 3px solid #9C27B0;
  border-left: none;
  padding-right: 10px;
  font-family: "Traditional Arabic", "Arial", sans-serif;
  font-size: 15px;
}

/* Left-to-right languages */
.read-frog-translated-content-wrapper[dir='ltr'] [data-read-frog-custom-translation-style='custom'] {
  border-left: 3px solid #2196F3;
  padding-left: 10px;
}

CSS Değişkenler

Yeniden kullanılabilir değerleri tanımlayın:

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Light/Dark Mod Desteği

Otomatik tema uyarlaması için light-dark() işlevini kullanın:

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

Vurgulu Efektler

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

Animasyonlar

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

En İyi Uygulamalar

Yapılacaklar ✅

Basit stillerle başlayın ve yavaş yavaş karmaşıklığı artırın
Birden fazla web sitesinde test edin
Okunabilirliği korumak için düşük opaklığa sahip arka planlar kullanın
Uzunluk değerleri için birimleri dahil edin: padding: 10px değil padding: 10
Tam onaltılı kodlar kullanın: #FF5733, #FF değil

Yapılmaması gerekenler

!important'den kaçının (seçici özgüllüğü zaten yüksek)
Aşırı karmaşık stiller yazmayın (temel özelliklere odaklanın)
8KB boyut sınırını aşmayın
Eksik birimlerden veya eksik renk kodlarından kaçının

Ortak Özellikler

Mülkiyet	Amaç	Örnek
`color`	Metin rengi	`color: #333;`
`background-color`	Arka plan rengi	`background-color: #FFF59D;`
`padding`	İç boşluk	`padding: 4px 8px;`
`border`	Kenarlık stili	`border: 1px solid #FFD54F;`
`border-radius`	Yuvarlatılmış köşeler	`border-radius: 4px;`
`font-weight`	Metin kalınlığı	`font-weight: 600;`
`font-size`	Metin boyutu	`font-size: 14px;`
`text-decoration`	Altı çizili vb.	`text-decoration: underline;`
`opacity`	Şeffaflık	`opacity: 0.8;`
`transition`	Animasyon zamanlaması	`transition: color 0.2s ease-out;`

Teknik Sınırlamalar

Maksimum boyut: 8 KB (8.192 karakter)
Editör: CodeMirror 6
Doğrulama: CSS Ağaç ayrıştırıcı
Seçici: [data-read-frog-custom-translation-style='custom'] kullanılmalıdır
Sarmalayıcı sınıfı: Çeviriler lang ve dir nitelikleriyle .read-frog-translated-content-wrapper içine sarılır
Mevcut özellikler: lang (ISO 639-1 dil kodları) ve dir (ltr/rtl)

CSS öğreniliyor

CSS konusunda yeniyseniz bu kaynaklar size yardımcı olacaktır:

Başlangıç Eğiticileri

MDN CSS Basics - Kapsamlı giriş
W3Schools CSS Tutorial - Etkileşimli örnekler
CSS-Tricks Guides - Pratik CSS teknikleri

CSS Özellikler Referansı

MDN CSS Reference - Mülk belgelerini tamamlayın
CSS Values and Units - Birimleri anlama (px, %, em, vb.)

Renkler

MDN Color Values - Renk formatlarının açıklaması
Coolors - Renk paleti oluşturucu
Color Hunt - Renk şeması ilhamı

İnteraktif Uygulama

CSS Diner - Oyunlar aracılığıyla CSS seçicilerini öğrenin
Flexbox Froggy - Düzeni öğrenin (temel stil için gerekli olmasa da)

Sorun giderme

Stil Uygulanmıyor

Doğrulama durumunu kontrol edin (yeşil "Geçerli" olmalıdır)
Seçicinin tam olarak [data-read-frog-custom-translation-style='custom'] olduğunu doğrulayın
"Özel Stil Kullan" seçeneğinin AÇIK olduğundan emin olun
Kaydettikten sonra web sayfasını yenileyin

Sözdizimi Hataları

Yaygın hatalar:

Eksik noktalı virgül: color: red → color: red;
Eksik birim: padding: 10 → padding: 10px
Eksik renk: #FF → #FF5733
Geçersiz özellik: colour: red → color: red

Stil Çatışmaları

Stiller beklenmedik görünüyorsa:

Web sitesinin CSS değerinin sizinkini geçersiz kılıp kılmadığını kontrol edin
Gerekirse özgüllüğü artırın (ancak genellikle gerekli değildir)
Siteye özgü sorunları belirlemek için farklı web sitelerinde test yapın

Özel Çeviri Stilleri

On this page