This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
October 13, 2010 10:09pm
Subscribe [3]#1 / Oct 13, 2010 10:09pm
I would just love to use a particular styling technique on the date in my blog design (see attached) but I’m not sure if I can get single words to justify across an area like that. Obviously I need a CSS solution since this would need to be dynamic text.
Does anyone have suggestions for how I might accomplish this, or is it just a pipe dream? Thanks!
#2 / Oct 13, 2010 10:40pm
I don’t think you’re going to be able to do that, even with CSS3. You can never be sure what font your visitors will see, or indeed what font scaling they have their browser set at.
The nearst you can get would be to force each line into a block and live with different word widths.
Try playing with CSS text justifying…
#3 / Oct 14, 2010 12:58pm
“text-justify” would be exactly what I need, but, ironically, it only works in IE. :/
I suppose if I really wanted to torture myself I could slice images for every day, month, and year and write conditionals for all of them!
#4 / Oct 14, 2010 1:07pm
text-align: justify; works on all browsers so it’s worth trying that to see what it does.
#5 / Oct 14, 2010 1:14pm
Right, but text-align: justify only works for multiple words. For single words it just aligns them to the left. So I could get it to work for the “two thousand ten” but not the month or most of the days. So I guess it’s more literally “justify left” rather than a true justify.
#6 / Oct 14, 2010 1:45pm
Ah yes, sorry it’s late in the day 😊
Just looking at it again you’re probably going to run into problems getting word widths consistant when names are long or short, eg “May” or “November”.
If you can live with variable word widths that would be a compromise, otherwise methinks it’s a pipe dream 😊
Here’s my test code if you’re interested:
<html >
<head>
<title></title>
<style type="text/css">
div { float: left; width: auto; background: #999999; padding: 10px; font-family: sans-serif; font-size: 120%; text-transform: uppercase; }
span { display: block; text-align: center; }
.a { font-size: 1.3em; }
.b { font-size: 1.7em; }
.c { font-size: 0.9em; }
</style>
</head>
<body>
<div>
<span class="a">October</span>
<span class="b">Thirteenth</span>
<span class="c">Two Thousand Ten</span>
</div>
</body>
</html>#7 / Oct 16, 2010 11:35pm
You mentioned this needs to be dynamic, but it looks like you have a known set of possible text, because it is for displaying month, day, year, right? If so, another idea would be to use the letter-spacing property and have a CSS class for each day, each month, each year (well, maybe not each and every year).
It would mean having roughly 50 pre-tested css classes, but it would accomplish what you are going for.
<span class="month-01">January</span>
<span class="day-01">First</span>
<style>
/* For January */
.month-01 {
letter-spacing: 1px;
}
/* for First */
.day-01 {
letter-spacing: 3px;
}
</style>#8 / Oct 16, 2010 11:43pm
You’d probably want to combine my above suggestion with bluedreamer’s suggestion, tweaking font-size at the same time (making it larger for shorter words).
#9 / Oct 17, 2010 12:00am
Just thought of another way, but it probably isn’t quite what you had in mind because it isn’t CSS-only. You could create the necessary classes and use image-replacement. It would mean a lot of slicing, but the results would be perfect.
<span class="month-01">January</span>
<span class="day-01">First</span>
<style>
/* For January */
.month-01 {
display: block;
text-indent: -999em;
background: url(/images/m-january.png) no-repeat;
}
/* for First */
.day-01 {
display: block;
text-indent: -999em;
background: url(/images/d-first.png) no-repeat;
}
</style>I didn’t mention it above, but with either of my suggesions you’d be using…
month-{entry_date format="%m"}...etc inside your class attributes to dynamically set the class.
#10 / Oct 18, 2010 4:14pm
Definitely a good idea Alex. I guess I have to decide whether the date format of my dreams is worth an ungodly amount of CSS classes! I suppose it would be worth it in order to accomplish something truly original, no?
EDIT: I tried to delete this accidental post from my other account, but it wouldn’t let me!
#11 / Oct 18, 2010 4:17pm
Definitely a good idea Alex. I guess I have to decide whether the date format of my dreams is worth an ungodly amount of CSS classes! I suppose it would be worth it in order to accomplish something truly original, no?
#12 / Oct 18, 2010 4:20pm
I think so! 😊
#13 / Oct 18, 2010 4:34pm
I say go for it, it’s only a couple of k’s worth of CSS 😊