Translate Toolkit & Pootle

Tools to help you make your software local

User Tools

AJAXifying the Pootle editor

This page describes a proposal to AJAXify the Pootle editor, in order to get a much pleasant and faster translation experience. Here we will analyze the current situation and suggest what could be done and how can it be achieved.

Current situation

Pootle's editor is powerful in the way that it displays useful information about the current unit to the translator. Anyhow, navigation and submission between units is not as fast as a user would want to, as it requires doing an HTTP POST request each time the user clicks on the Previous, Next, Submit, or Suggest buttons.

This is far from ideal – makes users wait and they may feel frustrated about the way they are working. As of today, only a single translation can be submitted/suggested at a time, so this is a limitation Pootle has that makes its users work slower.

Proposed scenario

Ideally translators should be able to work fast (ie, navigate fast between units) at the same time they get the most powerful features Pootle currently provides, including terminology suggestions, suggestions made by other users, quality checks, alternative source language texts and other comments and context information.

Translating and navigating through units

Navigation should be easily done with the keyboard, similar to what it is done in Virtaal. Going to a particular unit by clicking with the mouse must be possible too.

The current unit should always have the most relevant information, the same as it's displayed right now. The remaining units on screen should only display source and target texts.

Translators should be able to toggle information being displayed for the current unit that may not be relevant for them, as shown in the following table:

Suggestions Alternative Source Languages
From other users Lang1
From MT services Lang2
From a TM Langn

When a unit is edited (the translation, the comments or the status) and the translator moves to the next unit by clicking the Submit button, or with accesskeys, Pootle should automatically save the changes to the DB.

When the translator wants to move to the previous unit and the contents have been edited, TODO

Switching working scenarios

Translators also want to change working scenarios fast, so providing a direct path from the editor for filtering the work is also important. Usual filtering options may include (but may not be limited to) the following:

Filter by Status Filter by Quality Checks
All (translated + incomplete) accelerators
Incomplete (untranslated + fuzzy) escapes
Untranslated newlines
Fuzzy endpunc
Units with suggestions

Choosing a filtering option should present the translator with a list of the matching units, with the option to have them displayed in context and with easy navigation through the matched units.

There should be a Show me more context option on each unit which would display n more units for context purposes. These units must be visually distinct in order to differentiate that those units don't represent the set of filtered units.

UI mockups

General Overview

Rough mockup of the design

Filtering by Status

Filtering units by status

Toggling Unit Information

Toggling alternative source language options

Ways of implementation


There are several implementation options in order to get the proposed editor.

Custom editor from scratch

One of the options is to build our custom JavaScript handling code as well as the views that deal with the XMLHttpRequests.

  • Pros:
    • Flexibility in the implementation
    • We set the limits
  • Cons:
    • More development time needed
    • May not be mature and stable since the beginning.

Reuse jQuery DataTables

DataTables is a very flexible and customizable jQuery plugin for displaying data in tables. The data sets can be the DOM, JavaScript arrays, AJAX sources, and server-side scripts.

  • Pros:
    • Faster implementation
    • Easy and flexible to extend
    • Offers on-the-fly filtering
  • Cons:
    • It may set some limits
    • We may not need all the features offered by DataTables


While it is ideal to have all the stuff described here working right now, we should aim to achieve things step by step.

  1. XHR based navigation and edition (10-11 days)
    1. Retrieve store/query metadata
      1. Language information: source/target codes and direction
      2. Initial pager information: number of pages, page number, …
    2. Retrieve view units by page (3 days)
      1. Retrieve previous, current, and next pages starting in page n
      • We could preserve a data structure on the client side to avoid unnecessary requests.
      • We can also use templates from JavaScript. Reduces load time and bandwidth usage.
    3. Retrieve edit unit by uid (4 days)
      • Returns an HTML snippet.
      • If page number has changed, returns the updated pager
    4. Submit (POST) data to a unit
      • Can be a translation or a suggestion
        • Handle the situation where the captcha raises
      • Should move to the next unit
        • If it was a translation, update view unit i in the client data structure
    5. Navigation (2 days)
      1. Update units in the visible area
        1. Retrieve next view units
          • Check availability on the client data structure.
        2. Retrieve next edit unit
      2. Update pager
      3. History support
    6. Use proper accesskeys for navigation and edition (1 day)
  2. Filtering
    1. Filtering by
      1. Unit Status
        1. All
        2. Incomplete
        3. Untranslated
        4. Fuzzy
        5. Suggestions
      2. Quality Checks
      3. Search
    2. Show results as a list of view units
    3. Update pager
    4. Context information
      1. Retrieve n view units for uid
  3. Per-unit Customisation
    • Should return templatised HTML widgets like when editing units.
    1. Alternative Source Languages
      1. Retrieve translation for uid in lang language
      2. Based on preferences and Accept-Lang
      3. More languages available on the project
    2. MT backends
      1. Enable buttons for language (if supported)
    3. Toggle suggestions
      1. Retrieve suggestions for unit uid