[resolved] Combining Textile's .caps class w/ italicized abbr in title

Destry · 2019-10-22 16:06:13

I used to not like the span="caps" class (never saw the point of it) that gets added automatically on all-caps strings (including in Titles) until I realized I could piggy back on it to add italicized abbreviations in titles without the otherwise needed Textile for it in the Title field. But I’m running into a caveat, I think. Hopefully someone can steer me clear. Bear with me as I try to lay this out…

I’m working on this article, ‘The Short of NED’s Long History’. NED is an abbreviation for what is commonly cited as A New English Dictionary, but for which the full title is actually A New English Dictionary on Historical Principles; Founded Mainly on the Materials Collected by the Philological Society. Whether written out or abbreviated, book titles are always italicized, and you can appreciate in this case why using the abbreviated form is more convenient in my own article’s title.

The full article’s title outputs using this:

<h1 class="headline">
  <txp:title escape="textile,tags" />
</h1>

The escape attribute allowed me to use Textile in the Title field to make the abbreviation italic (__NED__'s). This would show up as desired, (NED’s), but it still appeared as __NED__'s in the browser tab. Not a big deal.

After realizing Textile’s caps selector was being added on the title string too (NED's), I piggy backed that in the CSS:

.headline .caps,
dt .caps {font-style:italic;}

With that I don’t have to add the additional Textile marks for italic around ‘NED’, but they’re still rendered italic and the browser tab doesn’t show the underscores either. And I know I will never use an abbreviation in a title like this again unless it’s for a book, so the consistent rendering is acceptable in my case.

So far so good.

The problem I’m hitting currently is that regardless which way I approach italicizing an abbreviation in the Title, it won’t render italic when the title is used on the homepage in a titles list.

The form markup for that, which explains the extra CSS line above, is this:

<dt>
  <a href="<txp:permlink />">
    <txp:title escape="textile,tags" />
  </a>
</dt>

But regardless whether I use __NED__ or just ‘NED’ in the Title field, and despite the presence of escape in the title tag, the abbreviation won’t render italicized.

In fact, the caps span doesnt’ get added in this case, for reasons I don’t savvy, so that would eliminate being able to piggy-back the selector for the homepage. But, as mentioned, neither does it work if writing __NED__ in combination with the escape="textile,tags" attribute.

Does anyone know how I might make the rendering consistent in both site locations?

jakob · 2019-10-22 19:53:12

Could it be you simply have your escaping in the wrong order? You’re textiling, then stripping the tags, hence all styling you put in is removed again.

Try

<dt>
    <a href="<txp:permlink />">
        <txp:title escape="tags, textile" />
    </a>
</dt>

In the tag escaping examples in the docs, there’s one with a space left in it before the word textile to avoid the  tag being created. I’m not sure if that works.

Another way, if you want to get rid of the  tags would be to do:

<dt>
    <a href="<txp:permlink />">
        <txp:title escape="textile,p" />
    </a>
</dt>

If I’ve understood the docs some-tag – e.g. p in this case – strips that tag only.

Destry · 2019-10-22 23:44:53

Thanks, Jakob, that was the push I needed.

I admit, I’m still not very clear on all the escape attribute options and when/how to use them. I find the word ‘escape’ a little confusing in relation to interpreting the values, but I have no better suggestion, and it’s a little late for that anyway. ;)

I did try various arrangements but was seeing the abbreviation disappear from the title in the ‘In This Issue’ list (homepage of Full Point), while remaining in the ‘Archive’ list (same page), both of which were using the same form piece to output titles:

<dt>
  <a href="<txp:permlink />">
    <txp:title escape="textile,tags" />
  </a> 
     <span>(&#8470; <txp:custom_field name="issue" />)</span>
</dt>

I didn’t show that span part in the form example before because I didn’t think it would be relevant to the problem, but it turns out it was, indirectly.

After your suggestion it made me look at it closer, and I realized I target that span to hide the (№ n) it outputs in the ‘This Issue’ list (while showing it in the ‘Archive’ list), and because it was targeting span itself, it was getting the caps span too. That didn’t occur to me the first time around. But I added a class on the second span now to target it specifically and the abbreviation was back. One little gremlin solved:

<span class="issnum">(&#8470; <txp:custom_field name="issue" />)</span>

Then it turns out either of these will give the same desired result:

<txp:title escape="tidy,textile" />
<txp:title escape="textile,p" />

I went with the first one. A space after the comma separators makes no difference in behaviour, apparently.

Final gremlin was the abbreviation appearing too small in the ‘Archive’ list; i.e. smaller than the dt it was in. Not sure why. But I added a special rule for that:

.type [class^="caps"] {font-size:inherit;}

And everything is working as expected now.

I’m left feeling again that Textile’s treatment of  on strings of capitals is more unexpected and annoying than good for anything.

But, a couple lines of CSS is nothing. Thanks again!

phiw13 · 2019-10-23 06:58:30

Of topic – you have a serious issue with your ::first-letter on Full Point with WebKit browsers + Chromium based browsers. The first-letter drops way below the block to which it belongs. I guess you only tested in Firefox.

Long story short – Firefox is wrong by current specs / thinking. A fix (in articles.css, line 298):

.dropcap:first-letter { line-height: .6; }

Destry · 2019-10-23 10:53:38

phiw13 wrote #319832:

Of topic – you have a serious issue with your ::first-letter on Full Point with WebKit browsers + Chromium based browsers. The first-letter drops way below the block to which it belongs.

A fix (in articles.css, line 298):

.dropcap:first-letter { line-height: .6; }...

Thanks for the heads up.

I guess you only tested in Firefox.

I also test in Safari, because I use both. But I don’t always test evenly, jumping around and getting distracted by one thing or another.

I also have a habit of tweaking and updating CSS files on the fly and that sometimes undoes something that was once battened down. For example, I just now see another problem with list styles on the homepage… That wasn’t there prior to my last CSS file update.

Not building websites for anyone anymore has made me less careful, I guess.

Long story short…

Shit happens.

Destry · 2019-10-23 13:55:18

phiw13 wrote #319832:

::first-letter

And thanks for pointing that out too. Seems I had quite a few pseudos missing the extra colon (though none seemed to be breaking anything obvious). I guess I need a list at hand to remember which gets which.

Textpattern CMS

Textpattern CMS support forum

#1 2019-10-22 16:06:13