Detect Wrapped text in a headline?

mikeg · 2008-05-08 18:03:18

Hello,

This is what I’d like:

My article titles are <h2>. I’d like to detect if the text between the <h2> and </h2> wraps to a new line.

What I’d like to have is a script or code snippet that would dynamically assign a CSS class to the <h2> only if it wraps to a new line (without simply counting characters).

Any ideas? Any help would be much appreciated.

MG

uli · 2008-05-08 19:42:43

Dynamically, for fluid layouts? I sit and wait here patiently, subscribed to this thread.
This article doesn’t really help, I think?

mikeg · 2008-05-08 20:27:22

This article doesn’t really help, I think?

Good and helpful article, but not quite.

The solution I’m looking for would be a Javascript deal, if anything (it’d have to be client-side). I’m not even sure it’s possible. Any script junkies out there?

the_ghost · 2008-05-08 22:12:22

You can forbid wrapping content by adding style=“white-space: nowrap; overflow:hidden;” and then you, may be, with javascript can check if content of container is hidden partly. But i’m not sure that js has such ability…

mikeg · 2008-05-13 21:10:13

Well, no luck with this one. Thought I’d share my workaround and reasoning behind wanting this…maybe someone else will find it useful. Here goes:

What I’m trying to do here is toggle the line-height on my <h2> so that a long title (one that wraps to a new line), doesn’t have an uncomfortably large line-height.

The idea is to keep a consistent vertical rhythm on the page while keeping the <h2> looking typographically sound. My base font size (in the body of the page) is 12px with a line-height of 18px.

Firstly, the “Prevent Widowed Words in article titles” preference is set to YES (set this in Admin > Preferences > Advanced).

Here’s the base CSS on my <h2>:

h2 { 
font-size: 2em; 
line-height: 1.5em; 
margin-bottom: 0.75em; 
letter-spacing: -1px; 
text-align: center; }

That CSS is fine for a title that takes up only one line. Two lines of 2em text at a 1.5em line height doesn’t look cool to my eyes. To achieve what I needed – the ability to change the line-height on the <h2> on an article-to-article basis – I used custom fields. I named a new custom field: “long-title”.

Here’s what I have in my article form for the <h2>:

<h2 class="<txp:if_custom_field name="long-title">long</txp:if_custom_field>"><a href="<txp:permlink />" title="Permanent link to this entry"><txp:title /></a></h2>

I post the article and check it in a few browsers. If the title wraps, I go back in and type a “yes” into the long-title custom field and repost the article. That gives the <h2> a class of “long”. here’s the CSS:

h2.long {
	line-height: 1.125;
	}

That creates a headline with two lines of text whose vertical real estate is only 4.5em (3 lines of vertical grid) instead of 6em (4 lines of vertical grid).

Maybe that’s too much work for such little benefit.

els · 2008-05-13 21:20:07

You can avoid ending up with an empty class attribute like this:

<h2<txp:if_custom_field name="long-title"> class="long"</txp:if_custom_field>>

uli · 2008-05-13 23:49:12

Maybe you’ll soon be running out of custom fields, once your customer discovers what a multitude of possibilities a CMS offers. In a fixed width layout you can as well use a form override to apply a different class to your headline. Another advantage: typos are impossible :)

Textpattern CMS

Textpattern CMS support forum

#1 2008-05-08 18:03:18

Detect Wrapped text in a headline?

#2 2008-05-08 19:42:43

Re: Detect Wrapped text in a headline?

#3 2008-05-08 20:27:22

Re: Detect Wrapped text in a headline?

#4 2008-05-08 22:12:22

Re: Detect Wrapped text in a headline?

#5 2008-05-13 21:10:13

Re: Detect Wrapped text in a headline?

#6 2008-05-13 21:20:07

Re: Detect Wrapped text in a headline?

#7 2008-05-13 23:49:12

Re: Detect Wrapped text in a headline?

Board footer