Chapter 11 Branding, Color, and Text
The “Simple” Design matters include PSU Branding, Color, and Text Styling. We refer to these as “simple” matters for the fact that for the most part, there is very little for you to have do decide. Rather, you just need to make sure that you are attending to guidelines we’ve laid out in this Style Guide. In other words, we’ve done all of the hard work for you in these cases.
11.1 PSU Branding
Given that we are all associated with Pennsylvania State University, we need to include the Penn State logo in each App. Rather than sticking the logo at the top of the Overview page, we are going to place the logo at the bottom of the sidebar. This has the benefit of having the logo appear throughout the entire App AND making the logo be as unobtrusive as possible.
If you have followed the directions for the Sidebar Layout, then you don’t have much to worry about as those instructions will ensure that you have properly branded your App.
11.2 Colors
Your App needs to have a consistent color scheme throughout. The color scheme should be checked against colorblindness to meet WCAG 2.1 Level AA. You can do so at the Coloring for Colorblindness website. If you are following this Style Guide (as you should be) then the vast majority of this section will be automatically handled for you.
See Section 9.1.2 and Section 13.5 for additional information on the use of colors.
11.3 Text Styling
Text styling refers the non-content aspects of the text on the page, such as the use of italics, boldface, alignment, as well as font size and color.
You should let the centralized CSS file do the heavy lifting for text styling. (Again, using boastApp will help you.) However, for this to work properly, you will need to tag content appropriately. (See the section on HTML, Section 7.1.)
If you run into a situation where some element needs additional styling, talk to Neil for help. You might have come across an element that needs to get added the central CSS file or a bug.
11.3.1 Headings
Use the Heading Tags for the short fragments that define the structure of your App. If you find yourself enclosing a complete sentence in Heading tag, you ARE NOT using headings correctly. Notice how the headings in this Style Guide aren’t complete sentences; your App should mimic this. Full sentences appear as regular paragraph text (i.e., enclosed in p()) and not be a Heading.
11.3.2 Paragraph Text
If you enclose text that gives instructions or other information to your App’s users in p() or li() (the later should be wrapped in either tags$ol() or tags$ul()), your App will understand how to style that text correctly. The central CSS file contains controls that set the base font size much larger than Shiny does natively as well as making text sizing dynamic. (This is important for making our apps mobile device friendly.) Again, using boastApp makes this process easier.
If you want to make a certain word or phrase italic, you will need to wrap that text in tags$em(). Similarly, if you want do the same with boldface, you’ll use tags$strong().
For example, this code:
p(
"When dealing with the ",
tags$em("t"),
"-distribution, we only have one parameter, the ",
tags$strong("degrees of freedom"),
"that we need to input."
)Becomes:
When dealing with the t-distribution, we only have one parameter, the degrees of freedom that we need to input.
Use italics (emphasis), and boldface (strong) sparingly.
11.3.3 Mathematics
For the most part, any mathematics you need displayed should be done using MathJax. Default to using inline typesetting with the \\( and \\) delimiters. If you need to use display style, you can use \\[ and \\]. For the vast majority of mathematics, you’ll wrap both inline and display style mathematics inside of a paragraph environment (p()).
If you’re writing mathematics directly in your app, remember you’ll need to escape the LaTeX commands by putting an extra backslash (\) in front; e.g., \frac{3}{4} would need to be \\frac{3}{4}.
If you’re reading in mathematical text from an external CSV file, you do not need the extra backslash in the CSV file.
If you need assistance in figuring out how to type up mathematics, please talk to Neil or Dennis.
Note: Double dollar sign delimiters are generally not recommended for displaying math as they can lead to unintended results. See: Writing Mathematics for MathJax.
11.3.4 [Game] Question Text
The text used as a question in a game should NOT be wrapped in a Heading tag; wrap the text in a paragraph tag.
11.3.6 Feedback and Hint Text
Again, let the central CSS file handle the styling of this type of text.
11.3.7 Text in R Plots
Unfortunately, any text in R plots does not get controlled by CSS. This means that you’ll have to play around with the settings. Using the ggplot2 package to make your plots (or other packages based upon the grid framework like lattice) will allow you to use the theme aspect to control text in your App.
Here is an example for how to do this:
# Create a ggplot2 object
g1 <- ggplot2::ggplot(data=df, aes(x=x, y=y, color=grp))
# Add your layers, for example
g1 + ggplot2::geom_point()
# Use theme to control text size
g1 + ggplot2::theme(
plot.caption = element_text(size = 18),
text = element_text(size = 18)
)You will need to play around with the settings to find the appropriate value; text size 18 appears to work out well in many cases.
Note: The text in your plot might not behave well for dynamic re-sizing on different mobile devices.