번역 표시 스타일

설정에서 페이지 번역 → 번역 표시 스타일을 엽니다. 바꾸는 즉시 미리보기에 반영됩니다.

프리셋 스타일

스타일	모양
없음	원문과 같은 일반 텍스트
텍스트 색상	번역을 강조 색으로 표시(기본값)
배경	번역 뒤에 은은한 하이라이트
약화	번역을 원문보다 연하게
흐림 효과	마우스를 올릴 때까지 흐리게, 스스로 시험해 보기
인용	인용문처럼 왼쪽에 막대
점선	점선 밑줄
테두리	번역을 얇은 상자로 둘러쌈

직접 쓰는 CSS

커스텀 CSS 스타일 사용을 켜고 편집기에 CSS를 씁니다. 번역에는 data-read-frog-custom-translation-style="custom" 속성이 붙어 있으니, 규칙을 이 선택자로 시작하세요.

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

편집기는 입력하는 동안 CSS를 검사하고, 저장으로 저장합니다. 글꼴, 트랜지션, 애니메이션 등 어떤 CSS든 쓸 수 있습니다.

아이디어

마우스를 올릴 때까지 번역 숨기기:

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

번역에 붙는 lang 속성으로 특정 언어만 글꼴 바꾸기:

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark()는 밝은 페이지에서는 첫 번째 색, 어두운 페이지에서는 두 번째 색을 고르므로 규칙 하나로 둘 다 맞출 수 있습니다.