I am working on a shiny App. I have inserted an equation using withMathJax(). I want to left align the equation and change the font to "Arial". Can anyone help?

Below is the sample problem:

library(shiny)


ui  <- fluidPage(
  titlePanel("hello"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      uiOutput("formula")
    )
  )
)

server <- function(input,output){
   output$formula <- renderUI({
    listcat <- c("Men","Ladies")
   value <- 15
    withMathJax(paste0("$$\\frac{",listcat[1], "\\cap ", listcat[2],"}{",listcat[1],"} =", value,"$$"))
  })
} 

1 Answers

2
BigDataScientist On Best Solutions

You can use CSS to align the formula:

div.MathJax_Display{
   text-align: left !important;
}

Note: Use !important to ensure the parameter is not overwritten

Then use

tags$head(tags$style(HTML("...")))

to insert it the shiny app.

Reproducible example:

library(shiny)

ui <- fluidPage(
  titlePanel("hello"),
  tags$head(
    tags$style(HTML("
                    div.MathJax_Display{
                    text-align: left !important;
                    }
  "))
  ),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      uiOutput("formula")
    )
  )
)

server <- function(input,output){
  output$formula <- renderUI({
    listcat <- c("Men","Ladies")
    value <- 15
    withMathJax(paste0("$$\\frac{",listcat[1], "\\cap ", listcat[2],"}{",listcat[1],"} =", value,"$$"))
  })
} 

shinyApp(ui, server)

Note that Arial is not supported by MathJax, see here: http://docs.mathjax.org/en/latest/font-support.html.