What is Visual Context?
Visual Context provides a visual representation of the source content to Translators and Editors as they are performing their work, and is a very effective way to ensure high-quality translations. Visual Context is displayed in the Smartling CAT Tool - the environment in which translations are performed.
Visual Context is applied to the source strings, so you don’t need to apply Visual Context for each language in your job. The same Visual Context will be visible to all Translation Resource users in the CAT Tool, so if your Visual Context includes text, it’s best that it is in the source language.
Visual Context vs Content
It is a common misconception that content and Visual Context are one and the same. Content is the actual words and strings that translators perform work on, whereas Visual Context is a visual representation of this content to help ensure translation quality. Sometimes Visual Context is captured automatically alongside the content, and sometimes an additional solution is required to capture Visual Context. More on this later in the article.
Match vs Bind
Another common misconception is the idea that content "matched" with context means that all strings will have Visual Context. When a context file is ingested into Smartling, the system will scan the context for text and attempt to match it with text in the content file.
When you upload a context file, you are prompted to choose how you would like Smartling to attempt to match the context with content. By default, Smartling will attempt to match the text on the context with all strings in the project you are uploading the context into. You can select a specific file from the dropdown list of all files in that project. Alternatively, you can choose to disable automatic matching.
Once you decide the strings you want Smartling to match the context with, the system scans the context file for text and attempts to bind the text with the strings. Successful binding results in the strings having associated Visual Context in the CAT Tool (as seen in the image at the beginning of this article). This happens automatically by OCR, and can be modified from the Image Context Editor.
General Guidelines
- Visual Context can be either static or dynamic.
- Static Visual Context has a fixed presentation in the CAT Tool, meaning that context will not update with translations in real-time.
- Dynamic Visual Context is changeable, meaning that context can update with translations in real-time.
- Determine the best Visual Context solution based on your content-type and content integration method (see table below).
- There are ways to automate Visual Context capture for each solution type. Please see the table below and consult your CSM.
Types of Visual Context
The main types are Visual Context are:
HTML Context
HTML resources from the content you are translating; examples include websites and apps, including desktop, mobile, or other form factors, as well as HTML email templates. One of the benefits of HTML context is that it is dynamic, allowing linguists to visualize their translations in real-time, rather than simply referring to an image of the source content.
Several Smartling content integration solutions provide simplified HTML context natively, meaning the Context panel displays the content but without any great visual detail. This is usually because the source of the content has not yet reached its "destination" environment. For example, most CMS's are essentially content repositories, that transmit content to other platforms, such as a campaign generator. In this regard, there is no telling how the content might appear, and so, a simplified arrangement of the content is displayed to linguists in the CAT Tool.
In some cases, a separate solution may be needed to capture HTML context. This separate solution could be provided by the connecting application, such as with Contentful, or by Smartling, such as integrating with Smartling’s JavaScript Library, or an API integration, or Smartling’s Context Capture Google Chrome Extension.
HTML context is automatically deleted after 48 hours if the context is not mapped to any strings.
Image Context
For example, screenshots. Upload any image file format containing a visual representation of the content that you intend to translate in Smartling. This is the most universal method of Visual Context, as you can feasibly provide screenshots from any source content-type. Image Context can either be matched to strings automatically using OCR (optical character recognition), or by manually mapping the strings to the image within the Smartling Dashboard. Image Context is commonly used for native mobile apps because HTML is not available for them.
Additionally, Smartling's Context from video functionality is a convenient way to get Image context for Website or Application content. Using a recorded video, it can upload screenshots to the Smartling Dashboard.
Video Context
When translating subtitles, you can add a YouTube or public MP4 link when uploading the .srt or .vtt file. This is another form of dynamic context, allowing Translators to view the video in real-time as they are performing translations on your subtitles.
Adobe InDesign Context
Visual Context for Adobe InDesign files (.idml) is generated differently than any other file type in the CAT Tool. Once a translation is saved, you can view the translation in-context by clicking the Refresh Translations button.
Strings with Visual Context
You can find out which strings have or do not have Visual Context by using the Visual Context filter in the Strings View.
Below the Context filter, you can search by the Context Name. Click Exact Match to find strings with context with the exact match of the filename inserted.
Additionally, you will see the uploaded Visual Context file name greyed out under the job’s File/URL name in the File/URL column in the Strings View.
Considerations for the Manual Process
When there is no automated Visual Context solution available for your content, how should you determine whether you should proceed with a manual method for capturing Visual Context? Here are some considerations to help you prioritize which content should have Visual Context:
Does your content include some ambiguous terminology?
For example, does “Home” refer to the button on your webpage or where you’re from? Does “Cancel” refer to terminating a subscription or reverting on an action on your webpage?
Will your content have a specific layout post-translation?
The last thing you want is to waste time and money translating content that doesn’t fit the layout of the end-design.
Is this high-value, important content?
For example, if your content drives eCommerce conversions or is highly trafficked, you will likely want to make sure that Visual Context is captured to ensure that translations are of the highest possible quality.
Software application user interfaces benefit greatly from Visual Context because the nature of the strings for such content-types can be more ambiguous. For example, single words and short phrases as opposed to long paragraphs of text. Uploading screenshots can clarify ambiguity and help ensure translation quality.
Supporting tools
Smartling has a range of supporting tools which can also further assist in providing guidance to translators. These can be used in alongside Visual Context or as an alternative as part of your translation strategy;
How Visual Context Works
Visual Context works differently depending on the content type. Below is an outline of how to create Visual Context for the various content types:
Microsoft Office documents
Visual Context is created automatically for Microsoft Office documents. The Visual Context is dynamic for all formats (excluding PowerPoint). For Smartling Excel translation, the width of the columns are adjustable in the Context panel in the CAT Tool. You can also upload image Visual Context and map the associated strings to that image. This will update the Visual Context panel on the associated string(s).
Visual Context is not automatically available for PowerPoint documents above 20 MB. Alternatively, you can upload screenshots of the slides, and they will be mapped automatically by OCR.
Adobe InDesign Files
For Adobe InDesign, the context is generated automatically from the .idml file. However, Adobe InDesign visual context is a hybrid, meaning it's neither static nor dynamic. Translations do not populate in real time, but a snapshot of translations can display with user generation. Translators can generate dynamic Visual Context from within the CAT Tool by clicking Refresh translations button once they save translations.
Video subtitles
For video subtitle files, when you upload the .srt or .vtt via the Files tab, you will be prompted to add a YouTube link for Visual Context. Adding the correct link for the uploaded file will match the subtitles to the video, so Translators can see the video play in the context panel in the CAT Tool.
Web content
Visual Context for any website or web application can be captured automatically or manually, depending on your resources and infrastructure. You can automate Visual Context capture by using Smartling’s JavaScript Library, an API integration. Smartling’s Global Delivery Network even automatically captures Visual Context as part of the native integration (see below). If you have developer resources and your website or applications are complex and dynamic, the JavaScript Library can be a great solution to automatically capture high-quality context. If you have limited developer resources, Visual Context can still be captured manually by using Smartling’s Context Capture Google Chrome Extension, or uploading an HTML or image file.
Mobile Apps
Automatically apply Visual Context of mobile application content with an API integration, or manually add Visual Context with Context upload. Additionally, Smartling's Context from Video allows you to upload a video, from which Smartling will capture screenshots.
Connectors
Visual Context is automatically created when content is submitted for translation for many of Smartling’s connectors. There are a few connectors for which a separate Visual Context solution must be implemented. Consult your Solutions Architect for options on an appropriate Visual Context solution.
Visual Context Solutions | Content Types
Visual Context Solution |
Content-Type most applicable |
Visual Context is captured Automatically or Manually? |
High-level overview |
GDN |
Websites Web Applications |
Automatically |
Natively captured by the integration. Visual Context is automatically created once the string has been ingested via the GDN. |
Smartling Connector |
Websites |
Automatically |
Natively captured by the integration. Visual Context is automatically created once the asset is submitted via Connector. Not all connectors support Visual Context, e.g. Wordpress. |
JavaScript Library |
Websites Web Applications |
Automatically |
Embed a snippet of JavaScript in the webpage to send Visual Context to Smartling each time the page is rendered. It can be embedded in development, staging, or production environments. The strings must already exist in Smartling in order for the Visual Context to be submitted. |
Chrome Extension |
Websites Web Applications |
Manually or Automatically |
Once the Google Chrome Extension is installed on the browser, manually run the extension on a given page to submit Visual Context to Smartling. To automate, either supply a list of URLs or sitemap to the extension or invoke it from javascript (e.g., from Selenium). The strings must already exist in Smartling in order for the Visual Context to be submitted. |
Image Upload |
Websites Web Applications Mobile Applications Design Files Business Documents |
Manually |
Manually upload screenshots to the Visual Context tab on Smartling Dashboard. OCR automatically matches the Visual Context to content strings. In some cases where the image quality is not high enough, OCR may not map Visual Context to every possible string. Manual mapping of content to Visual Context is also supported by dragging a text box on the screenshot and typing the required strings. The strings must already exist in Smartling in order for the Visual Context to be submitted. |
Visual Context API |
Websites Web Applications Mobile Application Design Files Business Documents |
Automatically |
The Visual Context API allows for Image Upload, HTML Upload or sending an image, HTML or video URL’s via API call rather than by dragging and dropping the Visual Context files into the Smartling platform. |
Context from Video |
Websites Web Applications Mobile Applications |
Manually |
Screenshots are automatically generated from a screen capture video. These screenshots can then be manually uploaded or uploaded via the Visual Context API. |