How to format date elements (year, month, date) individually with CSS and Rails i18n?

Question

We're using Rails with i18n gem. It's pretty standard stuff.

With i18n you can define your date format for different languages in the locales yml file.

For example, you can have en.yml

date:
    formats:
        long: ! '%-d %b %Y'

In your view file, you can do

<span class="homepage_date"><%= l Date.today, format: :long %></span>

This is all fine. It would output "10 Oct 2013" string and apply the CSS styling to the whole string.

However, we have a requirement to format the date elements (date, month, year) individually using different CSS classes.

For example, we want the date "10" in a skinny font, the month "Oct" in a bold font, and the year "2013" in another font.

In another language, the formatting may be different, for example, in Chinese, we want all 3 elements (year, month, date) to be in the same font.

I'm not sure if it's good practice to put CSS in translation yml files.

What's the best solution to meet our requirement?

Thank you.

Answer 1

you could do something like this

date:
  formats:
    styled: ! '<span class="day">%-d</span> <span class="month">%b</span> <span class="year">%Y</span>'

use that format

<span class="date"><%= l Date.today, format: :styled %></span>

and then specify css for those classes

.date .day {} ...