Aligning Currency Symbols and Values

Are you tired of juggling with dummy table cells just to get your currency symbols aligned properly in table columns? Aligning currency symbols while keeping the values aligned to the right can be a bit of a hassle, but there’s a simple technique that can save you time and frustration. In this post, we’ll explore a clean and effective method to achieve this using the :before pseudo-selector in CSS. Don’t feel overwhelmed by CSS; instead, follow the steps outlined in this tutorial.

The Challenge: Currency Symbol Alignment

Tables are commonly used to present data in a structured format, and aligning currency symbols alongside numerical values is a frequent requirement. Many people either remove the symbol or retain it with the value, but the desired outcome is typically to left-align the symbol and right-align the value.

Traditionally, a common approach is to create a dummy cell for the currency symbol. This often requires extra HTML markup and sometimes poses a challenge when adjusting table cell widths. Let’s have look at a more elegant solution!

The ::before pseudo-selector

The ::before pseudo-selector in CSS allows you to insert content before the actual content of an element, without altering the HTML structure. This feature can be harnessed to seamlessly add currency symbols before numerical values in table cells and float them to the left side of the table cell.

Setting up the table

Here’s how to achieve this:

  1. Invoke the Insert Dynamic Table wizard to insert a table that loops over detail data (Data Model).
  2. Set the formatting for the currency fields to ‘currencyNoSymbol’.

At this stage the table would look something like this (Design and Preview):

The currency and currencyNoSymbol formatters may not play well with the cell widths in Design view. Read our Shortening Handlebars expressions for improved layout article to solve this.

Craft the CSS Magic

Next, you’ll define styles to format the table cells and leverage the ::before pseudo-selector for inserting the currency symbols. We’re going to do this by assigning these cells a class name and subsequently add a CSS rule for that class in a stylesheet file.

  1. Select each of the currency cells and assign it a Class name via the Attributes panel. In our example we set those to ‘currency’.

    Assigning a class name allows us to target the cells from a stylesheet file.

  1. Open the context_all_styles or context_print_styles stylesheet file from the Stylesheets folder located in the Resources panel.
  2. Enter the following CSS rules.
.currency { 
    text-align: right; /* Align the value to the righthand side of the cell */
}
.currency::before { 
    content: "$"; /* Set the currency symbol */
    float: left; /* Align symbol to the left */
    margin-left: 2mm; /* Add space before the symbol */
}

The first rule aligns the currency value to the right edge of the table cell. The second rule is where the magic happens. It generates a pseudo-element for the cell, inserts the dollar sign as its content (although you can use any text), and floats it to the left side of the table cell. Additional spaces before the currency sign are created using the margin-left property.

The Result: Aligned Currency Symbols, Effortlessly

And there you have it! With just a few lines of CSS, you’ve managed to align currency symbols in table cells while keeping the values aligned to the right. No need for extra dummy cells or convoluted HTML structures.

This technique not only simplifies your code but also enhances consistency in your table formatting.