我可以在 Shiny 中将一段文字环绕在图像周围吗？

Question

我想看看是否可以在 Shiny 中将文本环绕在图像周围。我有一个闪亮的仪表板，带有一个 'About' 选项卡，其中包含一些文本段落和一些图像。我已经编写了以下概念的简化版本。在像 MS Word 这样的程序中，对于图像如何与文本内嵌以及文本如何环绕图像有几个不同的选项（参见我在 Word 中创建的底部图）。

我目前的解决方案是使用 fluidRow() 和 column() 来分割页面并将文本与图像分开放置。这可以工作，但不能像 Word 的文本换行功能那样提供干净的最终产品。

library(shiny)
library(shinydashboard)


ui <- dashboardPage(

  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #

  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar


  # Body of the dashboard
  dashboardBody(

    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",


        fluidRow(
          column(
            width = 10,

            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum."),
          ),
          column(
            width = 2,

            img(
              height = 100,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluidRow

        br(),
        br(),

        fluidRow(
          column(
            width = 8,


            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
          ),

          column(
            width = 4,

            img(
              height = 200,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluid row
      )
    )
  )
)



####################################################
####################################################

server <- function(input, output, session) {

}




shinyApp(ui = ui, server = server)

Answer 1

如果您将 p 样式设置为 css text-align 是合理的，它应该可以工作

p(style="text-align: justify;", "Lorem ipsum etc etc")

Answer 2

CSS方式：

library(shiny)
library(shinydashboard)

CSS <- "
p {
  line-height: 1.6; 
  font-family: Helvetica;
  text-align: justify;
  margin: 0;
  font-size: 14px;
}

.Rlogo {
  float: left;
  width: 250px;
  shape-outside: url(https://www.r-project.org/logo/Rlogo.svg);
  shape-margin: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
"

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

JavaScript方式：

CSS <- "
.Rlogo {
  float: left;
  width: 250px;
  padding: 30px;
}
"

JS <- "
$(document).ready(function(){
  $('.Rlogo').slickWrap();
});
" 

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$script(src = "https://cdn.jsdelivr.net/gh/jasonwyatt/jQSlickWrap/jquery.slickwrap.js"),
      tags$script(HTML(JS)),
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

我可以在 Shiny 中将一段文字环绕在图像周围吗？

Can I wrap a paragraph of text around image in Shiny?

r

shiny

shinydashboard

shinyapps