Embedded Files
Quick Start: Professional Live Captions Hack
Quick Start: Professional Live Captions Hack
While we work on building a native "broadcast mode" properly, this CSS hack allows you to transform the translation interface into high-quality lower-third captions for your livestream or production.
⚠️ Disclaimer: This setup relies on a 3rd-party browser extension. We did not write this software, and we cannot be held responsible for its use. Use it at your own discretion.
Step 1: Get a CSS Injector
Step 1: Get a CSS Injector
To apply these custom styles, you need a browser extension that can "inject" CSS into a website.
Chrome: Use Custom CSS by Denis.
Firefox/Edge/Safari: Similar "Custom CSS" or "User Stylesheet" injectors are available in their respective extension stores.
Step 2: Prepare the Interface
Step 2: Prepare the Interface
Navigate to your unique Translation URL.
Choose your target Language.
Crucial: Go to the interface menu and select "Only show translated language." While the hack works with both original and translated text visible, showing only the translation provides the cleanest "lower-third" look.
Step 3: Inject the Code
Step 3: Inject the Code
Open your CSS injector extension while on the translation page and paste the following code block. It is pre-configured for a Green Screen setup.
/* =========================================
BASIC SETTINGS (Easy for Beginners)
========================================= */
:root {
--caption-font-size: 1.4rem; /* Text size */
--caption-line-height: 2.2rem; /* Space between lines */
--caption-window-height: 8.5rem; /* How much vertical space to show */
--caption-text-color: #ffffff; /* Text color */
--screen-bg-color: #11FF00; /* Green Screen Background */
--caption-bg-color: #00000033; /* Subtle strip behind text */
--caption-shadow-color: #000000; /* Shadow/Outline color */
--caption-outline-size: 0.5px; /* thickness of the text outline */
}
/* =========================================
ADVANCED GOOGLE FONTS
========================================= */
/* Importing all weights: 100 to 900 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&display=swap');
:root {
--caption-font-family: 'Roboto Condensed', sans-serif;
--caption-font-weight: 100; /* Choose 100 (Thin) to 900 (Heavy) */
}
/* =========================================
1. CLEANUP & HIDING
========================================= */
body { background: var(--screen-bg-color) !important; }
.flex.flex-row.self-center.items-end.p-2,
.flex.flex-col.w-full.items-center.p-2,
.absolute { display: none !important; }
div.p-2.w-full.grow.flex.flex-col,
div.rounded-lg.bg-slate-200,
div.rounded-lg.dark\:bg-zinc-800,
div[class*="grow bg-white"] {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* =========================================
2. THE ANCHOR & CONTAINER
========================================= */
div.grow.bg-white.rounded-md.overflow-hidden.flex.flex-col {
display: flex !important;
justify-content: flex-end !important;
background: transparent !important;
}
div.size-control.grow.overscroll-none {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
width: 100% !important;
height: var(--caption-window-height) !important;
max-height: var(--caption-window-height) !important;
overflow: hidden !important;
padding: 10px !important;
background: var(--caption-bg-color) !important;
}
/* =========================================
3. THE TEXT STYLING
========================================= */
div.size-control.grow.overscroll-none > div.p-2 {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
div.size-control.grow.overscroll-none p.font-bold {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--caption-font-family) !important;
color: var(--caption-text-color) !important;
font-size: var(--caption-font-size) !important;
font-weight: var(--caption-font-weight) !important;
line-height: var(--caption-line-height) !important;
text-shadow:
2px 2px 6px var(--caption-shadow-color),
calc(var(--caption-outline-size) * -1) calc(var(--caption-outline-size) * -1) 0 var(--caption-shadow-color),
calc(var(--caption-outline-size) * -1) var(--caption-outline-size) 0 var(--caption-shadow-color),
var(--caption-outline-size) var(--caption-outline-size) 0 var(--caption-shadow-color),
var(--caption-outline-size) calc(var(--caption-outline-size) * -1) 0 var(--caption-shadow-color);
}
Configuration Presets
Configuration Presets
You can easily change the look by adjusting the variables in the :root section:
Traditional Broadcast (Classic Lower Thirds)
--caption-bg-color: #000000; (A solid black bar for maximum readability)
--caption-font-weight: 700; (Bold, impactful text)
--caption-window-height: 8.5rem;
Elegant Overlay (Minimalist Cinematic)
--caption-bg-color: transparent; (No background bar)
--caption-font-weight: 100; (Ultra-thin, modern look)
--caption-outline-size: 0.3px; (Subtle definition)
High Contrast (Outdoor/Bright Backgrounds)
--caption-text-color: #ffffff;
--caption-shadow-color: #000000;
--caption-outline-size: 2px; (Thick "stroke" around letters to prevent washing out)
Chroma Key Alternatives
--screen-bg-color: #0000FF; (Standard Blue Screen)
--screen-bg-color: #FF00FF; (Magenta Screen for specific lighting setups)
Large Print (Accessibility/Mobile Viewing)
--caption-font-size: 2.2rem;
--caption-line-height: 3rem;
--caption-window-height: 12rem; (Expands the box to fit larger text)
Page updated
Report abuse