# How FluentRead Handles Bilingual Translation Display: Architecture and Implementation

> Discover how FluentRead masterfully displays bilingual translations using a Vue.js tooltip. Explore the architecture and implementation behind its configurable selectionTranslatorMode.

- Repository: [ThinkStu/fluentread](https://github.com/bistutu/fluentread)
- Tags: architecture
- Published: 2026-02-26

---

**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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/model.ts) at line 89, the `selectionTranslatorMode` property initializes to `'bilingual'`:

```typescript
// 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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/config.ts). This reactive object propagates display mode changes across all components:

```typescript
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`](https://github.com/bistutu/fluentread/blob/main/components/Main.vue) (lines 84-88). An Element UI select component binds directly to the configuration object, enabling immediate mode switching without extension reload:

```html
<!-- 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`](https://github.com/bistutu/fluentread/blob/main/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'`:

```html
<!-- 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:

```html
<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:**

```typescript
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:**

```typescript
// 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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/config.ts), enabling real-time mode switching.
- **User interface controls** in [`components/Main.vue`](https://github.com/bistutu/fluentread/blob/main/components/Main.vue) (lines 84-88) bind to the configuration object via Element UI components.
- **Conditional rendering** in [`components/SelectionTranslator.vue`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/model.ts), while the runtime state is managed by a singleton instance exported from [`entrypoints/utils/config.ts`](https://github.com/bistutu/fluentread/blob/main/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`](https://github.com/bistutu/fluentread/blob/main/components/Main.vue) and the tooltip in [`components/SelectionTranslator.vue`](https://github.com/bistutu/fluentread/blob/main/components/SelectionTranslator.vue).