Text centering within different containers

centered_text_minisvg.R

# tips and ideas from
# https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle

library(minisvg)

doc <- svg_doc(width = 600, height = 600)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Centered text in circle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$g(svg_prop$transform$translate(50,40),
  stag$circle(cx=0, cy=0, r=35, stroke="none", 
              stroke_width=0, fill="yellow"),
  stag$text("Centered text", x = 0, y=0,
            class="mainfont_hc",
            svg_prop$`text-anchor`$middle, 
            svg_prop$`dominant-baseline`$middle,
            stroke_color="black", size=30)
  )  
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Centered text in rectangle. NB half-width and half-height position
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
w <- 150
h <- 40

doc$g(svg_prop$transform$translate(w,h/2),
      stag$rect(width=w, height = h, stroke="#aaa",
                stroke_width=2, fill="#fff"),
      stag$text("Rectangle text", x = w/2, y=h/2,
                class="mainfont_hc",
                svg_prop$`text-anchor`$middle, 
                svg_prop$`dominant-baseline`$middle,
                stroke_color="black", size=30)
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# centered text in ellipse
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$g(svg_prop$transform$translate(60,140),
      stag$ellipse(cx=0, cy=0, rx=50, ry=30, 
            stroke="#aaa", stroke_width=2, fill="#fff"),
      stag$text("Ellipse text", x = 0, y=0,
                class="mainfont_hc",
                svg_prop$`text-anchor`$middle, 
                svg_prop$`dominant-baseline`$middle,
                stroke_color="black", size=30)
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Load CSS for google font and specify styling
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$add_css_url("https://fonts.googleapis.com/css?family=Roboto+Condensed")
doc$add_css("
.mainfont_hc {
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  font-family: 'Roboto Condensed', sans-serif;
  fill: #0f0f0f;
}")

doc$show()