CODEWITHSUNDEEP
htmlrshinyunicode
koolmees
koolmees

Reputation: 2783

Using unicode in shiny

I am currently experiencing some strange issue. I have written some inline css in my shiny ui which looks like this:

ui <- fluidPage(
  tags$style(HTML('
    .ratings {
      position: relative;
      vertical-align: middle;
      display: inline-block;
      color: #b1b1b1;
        overflow: hidden;
    }
    
    .full-stars{
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      overflow: hidden;
      color: #fde16d;
    }
    
    .empty-stars:before, .full-stars:before {
      content: "\2605\2605\2605\2605\2605";
      font-size: 44pt;
    }
    
    .empty-stars:before {
      -webkit-text-stroke: 1px #848484;
    }
    
    .full-stars:before {
      -webkit-text-stroke: 1px orange;
    }
  ')),
  sliderInput(inputId = "n_stars", label = "Ratings", min = 0,  max = 5, value = 3, step = .1),
  tags$div(class = "ratings",
           tags$div(class = "empty-stars",
                    uiOutput("stars_ui")
           )
  )
)

The key here is the "\2605\2605\2605\2605\2605". 5 stars. When I run this UI however I see the following:

.empty-stars:before, .full-stars:before {
    content: "°5°5°5°5°5";
    font-size: 44pt;
}

So instead of taking the 4 bytes of my unicode R translates the \260 as a degree symbol and adds a 5 in plain text behind it.

If I then manually edit the html via inspect element back to "\2605\2605\2605\2605\2605" it will convert the degrees back into stars.

I wondered if this is a problem with my encoding so I tried to do some changes (changing the default text encoder in global settings, save script with encoding before running) but nothing worked so far.

Upvotes: 1

Views: 122

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84709

You have to double the backslashes:

.empty-stars:before, .full-stars:before {
  content: "\\2605\\2605\\2605\\2605\\2605";
  font-size: 44pt;
}

Upvotes: 2

Related Questions