How FluentRead Handles Bilingual Translation Display: Architecture and Implementation

FluentRead implements bilingual translation display through a configurable selectionTranslatorMode property that conditionally renders both original and translated text within a Vue.js tooltip component.

FluentRead is an open-source browser extension designed for immersive reading and language learning. The bilingual translation display feature allows users to view source text alongside its translation in a single interface, eliminating the need to toggle between views or lose context during reading sessions.

FluentRead Display Modes for Selection Translation

The Three Available Modes

The extension supports three distinct display configurations for the selection translator feature:

Mode	Display Behavior	Config Value
disabled	Hides the translation indicator entirely; no tooltip appears on text selection	disabled
translation-only	Shows only the translated text without the original source	translation-only
bilingual (default)	Displays both the original selected text and its translation in a stacked layout	bilingual

Default Configuration in model.ts

The default bilingual translation display behavior is hardcoded in the Config class definition. In entrypoints/utils/model.ts at line 89, the selectionTranslatorMode property initializes to 'bilingual':

// entrypoints/utils/model.ts
export class Config {
  // ... other configuration properties
  selectionTranslatorMode: 'disabled' | 'translation-only' | 'bilingual' = 'bilingual';
}

How Bilingual Translation Display Works Under the Hood

Configuration Management

The extension centralizes state management through a singleton config instance exported from entrypoints/utils/config.ts. This reactive object propagates display mode changes across all components:

import { config } from '@/entrypoints/utils/config';

// Runtime mode switching
config.selectionTranslatorMode = 'bilingual';

UI Controls in the Settings Panel

User interaction with bilingual translation display settings occurs in components/Main.vue (lines 84-88). An Element UI select component binds directly to the configuration object, enabling immediate mode switching without extension reload:

<!-- components/Main.vue -->
<el-select v-model="config.selectionTranslatorMode" placeholder="选择模式" size="small">
  <el-option label="关闭" value="disabled" />
  <el-option label="双语显示" value="bilingual" />
  <el-option label="只显示译文" value="translation-only" />
</el-select>

Conditional Rendering Logic in SelectionTranslator.vue

The tooltip component components/SelectionTranslator.vue implements the actual bilingual translation display through conditional Vue directives. The component evaluates config.selectionTranslatorMode to determine DOM element visibility.

Original Text Rendering (line 35): The fr-original-text container renders exclusively when the mode equals 'bilingual':

<!-- components/SelectionTranslator.vue -->
<div class="fr-original-text" v-if="config.selectionTranslatorMode === 'bilingual'">
  <pre>{{ selectedText }}</pre>
  <button class="fr-text-audio-btn" @click="toggleAudio(selectedText, $event)">
    <!-- audio playback control -->
  </button>
</div>

Translation Rendering (line 49): The fr-translation-result container appears in both bilingual and translation-only modes:

<div class="fr-translation-result" 
     v-if="config.selectionTranslatorMode === 'bilingual' || 
           config.selectionTranslatorMode === 'translation-only'">
  <pre>{{ translationResult }}</pre>
  <button class="fr-text-audio-btn" @click="toggleAudio(translationResult, $event)">
    <!-- audio playback control -->
  </button>
</div>

When the user selects text, the component invokes translateText to fetch the translation, then displays both blocks simultaneously in bilingual translation display mode, creating a side-by-side reference view within the tooltip interface.

Implementing Bilingual Display Programmatically

Extension developers and advanced users can manipulate the bilingual translation display behavior through the global configuration API:

Runtime Mode Switching:

import { config } from '@/entrypoints/utils/config';

// Enable bilingual display for language learning
config.selectionTranslatorMode = 'bilingual';

// Switch to translation-only for focused reading
config.selectionTranslatorMode = 'translation-only';

// Disable selection translation entirely
config.selectionTranslatorMode = 'disabled';

Conditional Component Logic:

// Check current display state
const isBilingual = config.selectionTranslatorMode === 'bilingual';
const showSourceText = isBilingual;
const showTranslatedText = isBilingual || config.selectionTranslatorMode === 'translation-only';

Summary

FluentRead's bilingual translation display architecture combines reactive configuration management with Vue.js conditional rendering to provide flexible text display options:

• Three distinct modes (disabled, translation-only, bilingual) are defined in entrypoints/utils/model.ts, with bilingual set as the default at line 89.
• Global state management occurs through the singleton config object in entrypoints/utils/config.ts, enabling real-time mode switching.
• User interface controls in components/Main.vue (lines 84-88) bind to the configuration object via Element UI components.
• Conditional rendering in components/SelectionTranslator.vue uses v-if directives on lines 35 and 49 to toggle the visibility of fr-original-text and fr-translation-result containers based on the current mode.

Frequently Asked Questions

What is the default display mode in FluentRead?

The default display mode is bilingual, as specified in entrypoints/utils/model.ts at line 89. When users install the extension, the selectionTranslatorMode property initializes to 'bilingual', ensuring that both source and translated text appear simultaneously in the selection tooltip.

Can I disable the bilingual translation display and show only the translation?

Yes. You can switch to translation-only mode either through the settings dropdown in components/Main.vue or programmatically by setting config.selectionTranslatorMode = 'translation-only'. This hides the fr-original-text container while preserving the fr-translation-result block, displaying only the translated output.

How does FluentRead determine which text blocks to render?

The rendering logic resides in components/SelectionTranslator.vue. The component evaluates config.selectionTranslatorMode using Vue conditional directives: the original text block (line 35) renders only when the mode equals 'bilingual', while the translation block (line 49) renders when the mode is either 'bilingual' or 'translation-only'.

Where is the display mode configuration stored?

The configuration schema is defined in the Config class within entrypoints/utils/model.ts, while the runtime state is managed by a singleton instance exported from entrypoints/utils/config.ts. This reactive config object persists the selectionTranslatorMode setting and propagates changes to all components, including the settings panel in components/Main.vue and the tooltip in components/SelectionTranslator.vue.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}