CODEWITHSUNDEEP
cssrshiny
Jaccar
Jaccar

Reputation: 1844

Change font of one word / substring in line of text in Shiny

In my shiny app, I've got a css file to sort out the styling for most things. However, I'm struggling with one element, which is that I want the font of one word to be changed within a line of text.

I know how to change some elements, such as making it bold or a different colour, but I'd like it to be a different font, and that doesn't seem to be as obvious. If I try something like that just for one word, I end up with the HTML printed as it isn't doing anything. I'm not very familiar with HTML or css so I might be missing something, but can't find a question on here with the same specific issue.

Here is example code:

UI

htmlOutput("example_text)

Server

function(input, output, session) {
output$example_text <- renderUI({
                                paste0("I want to make ", "this", " a different font")
                               })
}

Server v2 (makes the word bold but doesn't change the font family)

function(input, output, session) {
output$example_text <- renderUI({
         HTML(paste0("I want to make ", 
              "<font-family=\"Courier New\"><b>", "this", "</font></b>",
              " a different font")
              )
                               })
}

Upvotes: 1

Views: 1386

Answers (1)

Tonio Liebrand
Tonio Liebrand

Reputation: 17699

From what i see you could try using HTML(), but you would run into the problem of keeping the text in one line. You could get some help here: how to have text of 2 font sizes in same line in HTML?.

The css you can add with tags$style(): 

  tags$style('
    #mydiv{font-family:"Arial";}
    #mydiv b{font-family:"Courier New";}
  '),

The full code would read:

ui <- fluidPage(
  tags$style('
    #mydiv{font-family:"Arial";}
    #mydiv b{font-family:"Courier New";}'),
  htmlOutput("example_text")
)

server <- function(input, output) {
  output$example_text <- renderUI({
    HTML("<div id='mydiv'>I want to make <b>this</b> a new font.</div>")
  })
}

shinyApp(ui, server)

Upvotes: 3

Related Questions