Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

At the end of every post type in my Tumblr theme, I've got this code:

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

(I know the &nbsp; bit is not exactly a class act. It was my four second workaround, and it's not the purpose of this question, so bear with me!)

On a post with multiple tags, that yields:

this is what it looks like

If I just add a comma after {Tag}, making it <a href="{TagURL}">{Tag},</a>, I get:

too many commas

The last tag has an extraneous comma, and posts with only one tag would show the extra comma under this method, as well.

How do I add just the right number of commas?


Update:

Jeremy's answer below did what I wanted. But, in an attempt to get fancy be "standards-compliant" (though I don't know why anyone using IE8 would read my tumblr), I attempted to implement w3d's suggestion. So now the CSS looks like:

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

The result is now:

updated screenshot

(n.b.: the line break is unrelated - I added that on purpose.)

So. What went wrong?

share|improve this question
    
It's not really a case of being "standards compliant", it's just that IE8 will only support this CSS if it is in standards compliant mode. Unfortunately all users on Windows XP will be limited to IE8 since you need Vista+ to upgrade to IE9. –  w3d Sep 10 '11 at 17:14
    
@w3d Hm. Noted. Shoulda kept it at 'getting fancy'! :) –  Abby T. Miller Sep 10 '11 at 17:18
    
Sorry, I feel as if I'm messing things up, since it was obviously working OK for you in your browser. The additional white-space after the tag and before the , is probably the white-space that occurs after the </a> in your markup/theme. You could try removing this. The first comma is still present? Try changing content:""; to content:"%"; just to see if % shows? (Although I see from your comment on my answer that this may not have any effect?!) –  w3d Sep 10 '11 at 17:39
    
Which browser(s) are you trying this in? –  w3d Sep 10 '11 at 17:46
    
@w3d, the % doesn't show up. I'm running Chrome 13.0.782.220 on OS X Lion. Will go back to Jeremy's solution for now but continue to tweak. No worries about messing it up - it's a fun problem to chew on! –  Abby T. Miller Sep 10 '11 at 20:25
show 8 more comments

3 Answers 3

up vote 3 down vote accepted

I've got another idea.

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

This will add a span with the "tagtail" class after every tag.

Then, add this css:

span.tagtail + a.tag:before {
   content:", ";
}

This will select every tag anchor that comes after a tagtail span (so every one but the first). This way, we avoid the need to use the first-child or last-child selectors.


UPDATE:

If you want to ensure that the commas are styled apart from the anchor, I suppose you could also do:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

and then style it like:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

However, this might need tweaking because browsers differ on overriding rules.

share|improve this answer
    
+1 ... A shame about the extra markup, but I like it! :) –  w3d Sep 12 '11 at 14:21
    
I've found myself throwing extra unnecessary markup in a lot of design to get IE to match layout with CSS it doesn't support. –  Jeremy Sep 12 '11 at 14:52
    
If you want to ensure that the commas are styled apart from the anchor, I suppose you could also do: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags} and then style it like: span.taghead { display:none; } a.tag + span.taghead { display:inline; }. However, this might need tweaking because browsers differ on overriding rules. –  Jeremy Sep 12 '11 at 15:16
    
@Jeremy, this last bit is working perfectly. The tagtail method was rendering a space before the comma, but this little taghead bit is making me very happy now. Consider adding your comment back into the answer? –  Abby T. Miller Sep 13 '11 at 16:58
    
Done and done! Glad it works for you. –  Jeremy Sep 16 '11 at 20:33
add comment

Following on from @Jeremy's answer... To support IE8 (and IE7) you will need to use the first-child pseudo-class, rather than last-child. IE8 does not support last-child, even in standards compliant mode (ie. with a DOCTYPE).

a.tag:before {
   content:", ";    /* comma + space */
}

a.tag:first-child:before {
   content:"";
}

EDIT: However, a slight caveat with this approach is that you will probably have to remove any additional white-space that appears after the closing </a> in your markup/theme.

      {block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

EDIT: Screenshot of output of fiddle in Safari 5.0 on OS X:

Screenshot of output of fiddle in Safari 5.0 on OS X

share|improve this answer
    
I am using a.tag:before { content:", ";} and a.tag:first-child:before { content:"# tagged: ";}, but it results in a row of tags that just says , Mareen Fischinger , New York City , Times Square. Hm. This comment is confusing. I'll update the question. –  Abby T. Miller Sep 10 '11 at 16:59
add comment

Try some CSS trickery (to get it to work in IE 8, you need to specify a <!DOCTYPE> at the top of the document).

<p class="permalink">
       <a href="{Permalink}">{NoteCountWithLabel}</a>
       {block:HasTags} &nbsp;&nbsp; # filed under:
          {block:Tags}  
             <a class="tag" href="{TagURL}">{Tag}</a>
          {/block:Tags}
       {/block:HasTags}
</p>

Then, add the following CSS:

a.tag:after {
   content:",";
}

a.tag:last-child:after {
   content:"";
}

It uses the pseudo-selector :after and the little-used content property to add the comma after the fact. The second rule overrides the content property for the last tag in the sequence.

share|improve this answer
    
Excellent. Huge success. Thanks, Jeremy! –  Abby T. Miller Sep 10 '11 at 15:16
1  
@Jeremy: IE8 does not support the last-child pseudo-class even in standards compliant mode (ie. with a DOCTYPE). You will need to use first-child:before in order to support IE8 (and IE7). –  w3d Sep 10 '11 at 16:45
    
@w3d: That sucks. Silly IE. I'm not sure why your first-child:before selector isn't working properly for Abby, but I've added another answer with another idea that adds spans and uses the + selector. –  Jeremy Sep 12 '11 at 12:44
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.