highlighting different parts of a string in different color in r shiny ui

Question

I have an output string that's a full url, and I want to highlight different parameters in that url in different colors. I tried a few different approaches of splitting the string up in server.R then trying to join them in ui.R and apply different CSS classes but without success...the link looks like this

http://www.example.com?utm_campaign=[blue text]&utm_source=[red text]

When I try to combine different parts of the URL passed from server.R it creates spaces in the final URL.

Here's some sample code

In server.R

output$val1 <-  renderText({"http://www.example.com?utm_campaign="})
output$val2 <-  renderText({"[Enter campaign name]"})

in ui.R

p(textOutput("val1"), span(textOutput("val2"), style = "color:blue"), "more text" )

This breaks the outpout in to two lines

It would really help if you posted a bit of relevant code, especially the lines that create the parts of the URL/pass it around, so that we can see what you're doing and why there are spaces — DeanAttali, Dec 11 '14 at 02:26

score 1 · Answer 1 · edited May 23 '17 at 12:22

The sample code you provided creates newlines, not just spaces for me. If that's what you're trying to solve then here is the solution for that: Add inline = TRUE as a parameter to the textOutput. Or if you're using an old version of shiny that doesn't support that, add display: inline; using CSS.

p(textOutput("val1", inline = TRUE), span(textOutput("val2", inline = TRUE), style = "color:blue"), "more text" )

I usually look at the HTML output from a shiny app to see what's going on to figure out why things are rendered the way they are, that's how I went about this.

You'd notice that there is still a gap between successive <span> elements. If that's what you were referring to before, then that is a more complex problem and even in pure HTML/CSS there isn't a beautiful solution, let alone in Shiny. For example see this thread.

Here is one possible way to overcome this, which I admit isn't very pretty. There are likely other ways to achieve this, but here's the first solution I could think of, borrowing ideas from that CSS question thread. Th main idea is to use font-size:0 on the parent and restore the original font-size for the spans.

tags$head(
  tags$style(HTML("
    #val2 {
      color: blue;
    }
    p {
      font-size: 0;
    }
    p > * {
      font-size: 14px;
    } 
  "))
),

p(textOutput("val1", inline = TRUE), textOutput("val2", inline = TRUE), span("more text"))

Hope this helps

highlighting different parts of a string in different color in r shiny ui

1 Answers1