Non-Obtrusive Website Markup for Translation Layout Visualization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current localization tools disrupt the styling and appearance of websites during translation, making it difficult for translators to visualize translation changes and requiring disruptive markup that interferes with the code.
Innovation Solution
A non-obtrusive localization tool that uses pseudo tag notations and visual indicators to overlay translated text, allowing real-time visualization of changes without disrupting the website's layout.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If current markup methods are used for website localization, then translators can perform translations, but the markup disrupts the styling and appearance of the website
Solution Approach 1:
The patent introduces a localization overlay as an intermediary layer that sits between the original website content and the translator's view. This overlay contains the translated text and localization markers without modifying the underlying website code or styling, thus enabling translation while preventing styling disruption. The overlay is rendered on top of the original content using CSS positioning and transparency properties.
Solution Approach 2:
The patent creates a visual copy of the website content within the localization overlay, where translated text is displayed alongside or instead of the original text. This copying approach allows translators to view and work with translations without altering the original website's appearance or code structure. The overlay essentially creates a parallel version of the content that can be viewed and edited independently.
2Ease of operation
If obtrusive markup is used to indicate localized text, then translation can be performed, but the code becomes interfered with and harder to maintain
Solution Approach 1:
The localization overlay acts as a mediator that separates translation functionality from the website's core codebase. By implementing translations in an overlay layer rather than embedding markup directly in the website's HTML structure, the patent avoids complicating the original code. The overlay manages all localization-related HTML elements, making the code complexity isolated and manageable within a single component.
Solution Approach 2:
The patent segments the website into two distinct layers: the original website content and the localization overlay. This segmentation allows translation functionality to be implemented independently in the overlay without affecting the main website code. The overlay can be added, removed, or modified without changing the core website structure, thus maintaining code simplicity and readability.
3Reliability
If translators need to see translation changes before implementation, then translation quality can be verified, but current tools do not allow observation of layout effects
Solution Approach 1:
The localization overlay enables continuous viewing of translated content in the context of the actual website layout throughout the translation process. Translators can observe how translated text affects the layout, spacing, and appearance in real-time without needing to implement changes first. This continuous visualization maintains the useful action of layout assessment throughout the entire translation workflow.
Solution Approach 2:
The overlay provides immediate visual feedback to translators about how their translations will appear on the actual website. By displaying translated text within the overlay that mirrors the website's layout and styling, translators receive feedback on layout effects, text overflow, and visual appearance before final implementation. This feedback loop enables quality verification while maintaining layout context.
Data Source
AI summary
Disclosed herein are system, method, and computer program product embodiments for providing a non-obtrusive markup augmentation of websites during website localization. A method includes generating a localization descriptor for a localization element on a website, encoding the localization descriptor into unparsed syntax in code for the website, adding pseudo tag notations to the localization descriptor encoded in the unparsed syntax, extracting text that is being localized from the localization descriptor by identifying the pseudo tag notations, and creating a visual indicator for display as an overlay outside a visible area of the website to indicate a change in appearance of the website after localization, wherein a size of the visual indicator is scaled to match a size of the text as displayed in the visible area of the website when the code is rendered.