Shiny.i18n text decoration

Question

I am translating all texts in my Shiny-app with Shiny.i18n, using the live approach. I am having a realtive long Text in my app, which I want to be able to translate but also at the same time make individual words in that text bold.

I know that I could theoretically write and translate each word individually and then make it bold. But I would like to find a more elegant option that lets me make words within a larger context bold.

Here is a repex of my problem.

The Shiny-App

library(shiny)
library(shiny.i18n)
library(ggplot2)

i18n <- Translator$new(translation_json_path='translation.json')
i18n$set_translation_language('de')



ui <- fluidPage(
  shiny.i18n::usei18n(i18n),
  h1(i18n$t("Welt")),
  tags$div(
    style='float: right;',
    selectInput(
      inputId='selected_language',
      label=i18n$t('Change language'),
      choices = i18n$get_languages(),
      selected = i18n$get_key_translation()
    )
  ),
  h1(i18n$t("Hallo Welt"), windowTitle=NULL),
  
  )


server <- function(input, output, session) {
  observeEvent(input$selected_language, {
    update_lang(session, input$selected_language)
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

I have my translations saved in a json e.g.

   "languages":[
      "de",
      "en"
   ],
   "translation":[
      {
         "de":"Hallo Welt",
         "en":"Hello World"
      },
      {
         "de":"Sprache Aendern:",
         "en":"Change language:"
      },
      {
        "de":"Welt",
        "en":"World"
      }
   ]
}

If i now try to change the language only "World" is translated. "< strong >Hallo< /strong > Welt" does not get translated at all. I dont understand why.

If I add h1(i18n$t(HTML("Hallo Welt")). "Hallo" does get bold, but the sentence is still not translated.

I have also tried h1(HTML(i18n$t("Hallo Welt")), but this throws the following error message:

Error in FUN(X[[i]], ...) : argument is not a character vector

Thank you very much for any advice or any ideas

user_4125751 · Answer

First things first, a Full Reproducible Example will halp in the future to get proper answers, as you do not require the people who are dedicated some of their time to your problem to first create a running example.

Regarding your problem. You need to tell shiny to render the text as HTML. See the use of HTML in the example below.

`translation.json`

{
   "languages":[
      "de",
      "en"
   ],
   "translation":[
      {
         "de":"Hallo Welt",
         "en":"Hello World"
      },
      {
         "de":"Sprache ändern:",
         "en":"Change language:"
      }
   ]
}

`app.R`

library(shiny)
library(shiny.i18n)
translator <- Translator$new(translation_json_path = "translation.json")

ui <- fluidPage(
   titlePanel('Use HTML in Translation'),
   uiOutput('page_content')
)

server <- function(input, output, session) {
   i18n <- reactive({
      selected <- input$selected_language
      if (length(selected) > 0 && selected %in% translator$get_languages()) {
         translator$set_translation_language(selected)
      }
      translator
   })
   
   output$page_content <- renderUI({
      tagList(
         sidebarLayout(
            sidebarPanel(
               selectInput('selected_language',
                           i18n()$t("Sprache ändern:"),
                           choices = translator$get_languages(),
                           selected = input$selected_language)
            ),
            mainPanel(
               ## note the use of `HTML` here
               p(HTML(i18n()$t("Hallo Welt"))) 
            )
         )
      )
   })
}

shinyApp(ui = ui, server = server)

Shiny.i18n text decoration

1 Answers

`translation.json`

`app.R`

Screenshot