Skip to content

Add Spanish translation

Cee Nell requested to merge add-lang into main

This incorporates the text translation for Spanish language addresses Spanish translation of site (#45) · Issues · Water Mission Area / VizLab / vulnerability-indicators · GitLab (usgs.gov). This required some reworking of how the text and code are set up to facilitate the translation. In particular, nearly all of the text that was encoded directly into components (including things like button labels) has been moved to json files in src/assets/text using es endings for Spanish language and en endings for English language. This allows vue-i18n to lazy load the correct text files based on browser language settings, and to build the page accordingly.

A few challenges/considerations for future translated products:

  1. How to provide translations when there's text strings in the data itself. In this case I converted the csv data to json and offered es versions of the variable names with the data. Then in the components where the data are used (e.g. BeeswarmChart the language is checked before building the chart to use the correct language. This works, but creates multiple locations where translations are appearing (data and text) and 2 different approaches (multiple languages within a single file vs single file for each language). Is there a higher level organizational structure that would facilitate this and simplify the workflow?
  2. Some translations are defined in multiple places. For example, the dimension names appear in the text_.json files and in the data files. How to structure so they are translated once and leveraged in the different ways needed by the current set up? (similar issue to #1 (closed))
  3. Approach to adding tooltips, <span> elements, checkboxes, buttons, etc using html and maybe some js. This is currently being accomplished in a few different ways. For example, in BeeswarmChart the checkboxes are written in the template, and pull text from the json files to translate the labels. For tooltips however, html is added within the json file and v-html is used to render. This is throwing a warning (`Recommend not using HTML messages to avoid XSS`) and needs to be revisited. Related: is there a better way to add tooltips to certain words, where anytime the word appears in the page the tooltip would be auto-generated? (vs currently adding to the text where we want it).

Specific steps taken:

  • Add translated text in separate json files with "es" ending for Spanish and "en" ending for English
  • Move text directly in components to json files to be able to serve translated versions
  • modify main.js to leverage vue-i18n to serve translated text
  • detect browser language
  • dynamically load text files given browser language
  • English as default
  • Add translated terms to data files for chart rendering
  • Include translated version of explainer image for interactive dendrogram
  • ensure tooltips are included and translated

To test switch the default browser language to Spanish and load the page. Ensure all text elements offer a translated version.

This does everything (I think) except for the references and authorship at the end. I was encountering some issues with that and would like to merge this in for extra review while I continue to sort that part out.

Edited by Cee Nell

Merge request reports

Loading