Add Spanish translation
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:
- 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? - 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)) - 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, inBeeswarmChart
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 andv-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.