switching date format in responsive web design

[Raphaelle]

I was wondering if there was an easy way of switching from a date format to another for a responsive layout?

For instance on a blog post, on a large window let's say I want my date to display like this in a neat little calendar shape :

JUL
12
2011

but for smaller devices I'd want the date to appear like this, all one one line :
12 July 2011.

Is there any front-end way of doing this? I'm looking for something that could be triggered by media-queries.

Cheers

[ralph.m]

One way would be to wrap each part in a span, like so

<span>JUL</span>
<span>12</span>
<span>2011</span>

and set those spans to display: block for desktops but not for small devices.

[FFCus]

Would you be able to use different stylesheets?

A List Apart: Articles: Return of the Mobile Stylesheet

[Raphaelle]

Thanks for your replies. My issue isn't with displaying each item next to each other or on top of each other, it's the fact that in the first instance I need the first 3 letters of the month, and in the second instance, I want the whole word for the month.

So SEP becomes September.

[FFCus]

Ahhh, I see what you're saying now. That's an interesting question.

Would you be opposed to using JavaScript? If not, you could sniff out the screen size to see if you have a small screen and then change the text of the span in question.

[Raphaelle]

Hmm, I don't think I'd want to use Javascript here. I think it's not worth it for such a little detail. At least for the project I'm working on now.

However someone suggested that I use :after to display the content of the title attribute.

For instance my HTML could look like this :

<span class="day">12</span>
<span class="month" title="September">SEP</span>
<span class="year">2011</span>

and in my CSS I'd have something like this if I want to display the whole word "September" instead of "SEP" :

.month {
    display: none
}

.month:after {
    content: attr(title) ": ";
    display: block
}

I haven't tested this yet so I have no idea if I should put a display:none there or use another trick to hide "SEP". Also I'm not sure I need :after, but you get the idea.

Do you think it's an interesting solution?

[FFCus]

I would always try to employ CSS above JS first if possible. I will have to run some tests when I have some down-time and see how that works.

[ralph.m]

Still looks easy to me with CSS. You could do it like this:

<span>SEP</span><span class="mon">TEMBER</span><span>12</span><span>2011</span>

So, when you want it all in one line, do nothing. When you want the date stacked, just say in the CSS

span {display: block;}
span.mon {display: none;}

With no styles on the spans, nothing will happen: the line will just be one normal line. But with display: block on the spans, they'll stack. And with display: none on the end of the month, it will disappear.

[Raphaelle]

Thanks ralph.m, your solution is ideal however I'm not sure how easy it is to implement when the date is generated dynamically with a PHP function.

If it's hard-coded then yes, that's definitely how I'd do it for a website in English.

However in other languages such as French, the 3 letter abbreviation of the month does not always match the first 3 letters of the actual word.

July is Juillet in French, and the 3 letter abbreviation is JUL (as in English), not JUI.

(I happen to work in France... )

[ralph.m]

I'm not sure how easy it is to implement when the date is generated dynamically with a PHP function.

Hm, yeah, that's a game changer. Is some kind of CMS generating this? Or is it just PHP you write?

This isn't my area, but I wonder if you can insert different bits of PHP between the various spans. For example, on big screens set span.abbr to display block and span.full to display: none, and vice versa on small screens.

<span class="abbr">JUL</span>
<span class="full">JUILLET</span>
<span>12</span>
<span>2011</span>

And between each span, let PHP insert either the month abbreviation, or the month name, or the day's date, or the year.

Just a thought, anyway.

[Lemon Juice]

An idea - you could output both formats in your php and position them as floated boxes so you can use the fact that on a smaller screen size (=smaller width) one box with date will float to the next line. Actually, I used another empty box to act as an element pushing the other boxes because I found it difficult to use the date boxes alone:

<!DOCTYPE html>
<html>
<head>
<title>Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	div.wrapper {
		background: silver;
		margin-right: 150px;
	}
	div.date-wrapper {
		min-width: 90px;
		height: 90px;
		position: relative;
		overflow: hidden;
	}
	div.date {
		position: absolute;
		bottom: -110px;
	}
	div.small-screen {
		float: left;
	}	
	div.empty-box {
		float: left;
	}	
	div.large-screen, div.small-screen, div.empty-box {
		width: 100px;
		height: 100px;  /* size larger than the largest possible date */
		background: yellow;
		overflow: hidden;
	}
</style>
</head>
<body>
<div class="wrapper">
	<div class="date-wrapper">
		<div class="date">
			<div class="large-screen">
				JUL<br/>
				12<br/>
				2011
			</div>
			<div class="small-screen">
				12 July 2011
			</div>
			<div class="empty-box"></div>
		</div>
	</div>
</div>

More content...

</body>
</html>

In this example as you make the browser window very small (narrow) the date will change from one format to the other. So the displayed format is dependent only on the browser width or the wrapper element width. This code is a bit convoluted considering the simple effect you are trying to achieve but maybe you would be able to simplify the implementation.

[ralph.m]

That's very clever, Lemon Juice! I think you will do well at Paul O'Brien's CSS Quizzes!

[Lemon Juice]

That's very clever, Lemon Juice! I think you will do well at Paul O'Brien's CSS Quizzes!

Thanks, Ralph, I also think it's a clever idea but I'm not sure if it's practical here since it's supposed to work on "smaller devices". I don't know what the OP meant by that but usually mobile phones have much less css capable browsers and may choke on this. This works in all major desktop browsers but would need testing on the other "smaller devices" it's supposed to work on.

[Raphaelle]

That's a neat little trick Lemon Juice! You must have scratched your head a little to come up with this

However I wouldn't have the date twice in the HTML… it feels wrong. Accessibility and all that…

Plus you don't need to bother with positioning tricks like that, I'm going to use media queries anyway so what I'll do is in one case I'll position the month absolutely within a container that has position: relative, and in the other case you let each element position itself next to the other naturally, as inline elements do.

My concern was purely about generating the date in the format that I want.

I think the best solution I've heard so far is to use the TITLE attribute for the month. In the actual element I'd have the full word, and in the TITLE the 3 letter version. Then I'd use some css to display either the content of the TITLE or of the tag.

I've had a play with this and it works very well, although I'm not totally happy about the way I'm hiding the month when I'm displaying the TITLE attribute instead.

<!DOCTYPE html>

<html>
<head>
<title>Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


.dateBox {
	font-family: trebuchet ms, helvetica, arial;}


@media screen and (min-width: 800px) { 
.dateBox {
	-moz-box-shadow: 2px 2px 0 #dcdcdc;
	-webkit-box-shadow: 2px 2px 0 #dcdcdc;
	box-shadow: 2px 2px 0 #dcdcdc;

	background: #eee;
	color: #000;
	font-size: 14px;
	overflow: hidden;
	padding: 15px 2px 2px;
	position: relative;
	text-align: center;
	width: 50px; }


.day {
	font-family: georgia, serif;
	font-size: 34px; }

.month {
	color: #eee;
	left: 3px;
	margin-top: -15px;
	position: absolute;
	text-transform: uppercase;
	top: 3px;
	width: 50px; }


.month:after {
	color: #000;
    content: attr(title);
    display: block; }
}


@media screen and (max-width: 800px) { 

.dateBox {
	color: #666;
	font-size: 12px;
	font-style: italic;}

}




</style>
</head>
<body>

<div class="dateBox">
	<span class="day">12</span>
	<span title="JUL" class="month">juillet</span>
	<span class="year">2011</span>
</div>

</body>
</html>

You'll find a hosted version here. All you need to do is to resize the browser window.

And you need a recent browser obviously

[ralph.m]

Wow, that's another clever solution. I'm impressed.

[Lemon Juice]

Yes, your solution is really nice and that's the way to go! I didn't think you could do it this way...

I was just curious if I can do it with positioning of floats but it feels too complicated to me and, as you say, having the date twice in html is not good.

I've never used media queries - do they work in IE9?

[Stomme poes]

I've never used media queries - do they work in IE9?

Yes.

I tend to send IE6-8 the "large screen" stylesheet since they do not.

Though you could consider using JS to detect device-width and then send IE the mobile stylesheet dynamically... bleh.

[Raphaelle]

I agree, you can either display the large version of your layout on IE, or if you really want your media-queries to be picked up EVEN by IE6, you can use a tool such as 320 and up, by Andy Clarke.

I've used it before, it's great combined with Paul Irish's HTML5 boilerplate (they've released version 2 yesterday, exciting!).

[Stomme poes]

That site would be so cool, if I could read it.

[Raphaelle]

After we discussed this topic here, I wrote an article about how to display a different date format with media queries and css.

Unfortunately for you, it's in French

Someone made a very useful comment : instead of using the TITLE attribute I should be using the HTML5 data- custom attributes !! I love this idea

I think it's the best way to do it, although I don't know how it degrades in old browser. It might work just fine with a trick or two. I haven't tried yet.

[deathshadow60]

<span class="date">12 August 2011</span>

split into lines:

.date {
display:inline-block;
width:1px;
}

The text will overflow .date's width still rendering, but it will break into multiple lines. does create flow issues though so it really depends on what you're doing with them.

[ralph.m]

<span class="date">12 August 2011</span>

split into lines ...

How interesting. What is it about inline-block that causes that behavior?

[deathshadow60]

How interesting. What is it about inline-block that causes that behavior?

It lets you set a width. Display:block will have the same effect.

While display:inline lets you set side-padding and it obeys, width on inlines is ignored.

[Stomme poes]

Someone made a very useful comment : instead of using the TITLE attribute I should be using the HTML5 data- custom attributes !! I love this idea

Didn't realise you wanted a Javascript solution. That's what data-* attributes are for: local hooks for Javascript to grab name-value pairs.

Or did you mean using CSS to grab the data attribute?

[Raphaelle]

yes I meant using CSS to grab the content of the data- attribute

Definitely no javascript wanted here