Translating Subtitles

Read this page in other languages: French, Gujarati

This page explains the overview of the translation process of tutorial video captions (subtitles). You may want to also read the Tutorial Captions and Transcripts page of this handbook if you are new to captioning.

In order to translate subtitle files, you’ll need a text editor. You can use text editors preinstalled in your operating systems, or use free text editors like Phoenix. (XML Copy Editor is also an open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. tool made specifically for editing XML files and can be used here, too.)

Where does the Training Team host their videos?

The Training Team records two types of video content: Tutorials and Online Workshops. Both types of videos are hosted on WordPress.tv. Once uploaded, all videos should be subtitled. Tutorial videos are then embedded into content on Learn WordPress.

All Online Workshop recordings can be found from this link: https://wordpress.tv/category/learn-wordpress-online-workshops/

Tutorial videos are uploaded to WordPress.tv, then embedded into Learn WordPress.

  • Example of video uploaded to WordPress.tv: https://wordpress.tv/2023/02/22/designing-with-the-columns-block/
  • Example of the same video embedded into Learn WordPress: https://learn.wordpress.org/tutorial/designing-with-the-columns-block/

Top ↑

Adding Translated Subtitles to an English Video

Top ↑

1. Locate and download the subtitle file

  1. First, find the video you want to translate subtitles for on WordPress.tv. You can use the search bar on WordPress.tv to search for the video title.
screenshot pointing out the search bar in the top right of WordPress.tv
  1. Once you’ve opened the video, search for SUBTITLES in the menu bar on the right, underneath the video. If it has been subtitled already, you should see TTML: English.
screenshot pointing out the "SUBTITLES" menu item in the sidebar on a WordPress.tv video post
  1. Click on the word English to download the English subtitle file (.ttml file) to your computer.

Top ↑

2. Format the subtitle file

Once downloaded, open the subtitle file in your text editor. Often times, the file will look like this, making it hard to edit.

example of subtitle file with no formatting

It’s recommended that you format the file first, so that it easier to translate the subtitles.

  1. Search online for a free XML code formatter. (Though not open source, https://codebeautify.org/xmlviewer or https://www.freeformatter.com/xml-formatter.html are options that are easy to use.)

The extension of the subtitle file downloaded from WordPress.tv will be .ttml. TTML files are based on XML files, so an XML code formatter will work well here.

  1. Use these tools to format the subtitle file. You can download the formatted file as a new file, or copy-and-paste the formatted text back into your editor. The formatted file should now look like this.
screenshot of a formatted subtitle file opened in an editor

Top ↑

3. Translate the subtitles

You will notice the majority of the subtitle file looks like this.

<p begin="0.54s" dur="">English text appears here.</p>

The text that appears between the two p brackets is the text you’ll want to translate. You’ll want to leave the rest of the file as-is.

For example, here is a sample subtitle file.

<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling" xml:lang="en">
   <head />
   <body region="subtitleArea">
      <p begin="0.54s" dur="">Hi and welcome to Learn WordPress. In&lt;br /&gt;this video, we are going to explore the</p>
      <p begin="5.25s" dur="">Columns block. The Columns block is a&lt;br /&gt;container block, which can be used to</p>
      <p begin="10.83s" dur="">create a variety of custom layouts.</p>
   </body>
</tt>

Here is the same file translated into Japanese. Notice the first few lines of the file, details inside the p brackets, and the final lines are all left as-is.

<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling" xml:lang="en">
   <head />
   <body region="subtitleArea">
      <p begin="0.54s" dur="">こんにちは。Learn WordPress へようこそ。今日はカラムブロックについて</p>
      <p begin="5.25s" dur="">見ていきましょう。カラムブロックはカスタムレイアウトの作成などに使える</p>
      <p begin="10.83s" dur="">コンテナの役割を果たすブロックです。</p>
   </body>
</tt>

Sometimes, you’ll see combination of symbols that appear in the text you’re trying to translate. For example, in the code above, you’ll see &lt;br /&gt; in some lines of text. These can be deleted when translating subtitles.

Once you have translated the file, save the file as a new .ttml file.

If the code formatter or text editor you used changed the file extension to .xml, make sure to change it back to .ttml in order to upload the file to WordPress.tv.

Top ↑

4. Upload the translated subtitle file to WordPress.tv

  1. Open the page you originally downloaded the subtitles from. From the SUBTITLES section in the right menu bar, click on Subtitle this video →.
screenshot pointing out the "SUBTITLES" menu item in the sidebar on a WordPress.tv video post
  1. On the following page, fill out your WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ username and email address. Select the language you have translated the subtitles into. Upload your file and select Submit.
  2. Uploaded subtitles files must be approved by a site admin on WordPress.tv before they show up on the video. Feel free to pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” a @faculty-admin in the #training Slack channel, asking them to approve your translation file.
  3. Once approved, the translated subtitles will appear as a new language in the video Captions setting.
screenshot showing where the "Captions" setting is found on WordPress.tv videos

Top ↑

Updating existing subtitle translations

If you find any mistakes in an existing subtitle file, you can fix them by updating the file and replacing the old one.

  1. Download the subtitle file from WordPress.tv
  2. Make edits
  3. Ask a Faculty Administrator to replace the old one

Note to Faculty Admin: The old subtitle file must be unapproved and removed first before uploading the updated file. (There’s a known bug that prevents new file uploads if you delete the old file without unapproving it first.)

Last updated: