13 replies [Last post]
sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

Hi, well this is a hard effect to describe with words, so I have attached a mock up image and a link to a working example.
text.jpg
Has anyone seen a tutorial for this effect? Or know what it is called, I am having trouble searching for it because I don’t know the best keywords to describe it.

Here is an example of it being used.
http://art.yale.edu/Home
Each word is being wrapped in a class and styled. Which seems like a heavy handed way to do it + I don’t know how to implement something like that dynamically.

Thoughts & ides are welcome Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Having that example should

Having that example should mean you can work out how they achieved this, using tools such as firebug to look at the elements and styles applied to them.

However don't follow it's example as it's not great code.

Adding a span around all the text and a background to the span will achieve what you are after; you might need a further element to wrap the p? and span to which you can add a padding left value or border-left of the same background color as they have to give the effect of the text padded from the left.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

Yes, I can figure it out how

Yes, I can figure it out how to put the background manually, but I am looking for a dynamic solution so that I do not have to put a span element around every line.

Someone must have already built this functionality, and I do not like reinventing wheels. Has anyone seen a solution for this problem anywhere?

Cheers.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You can't simply ask for a

You can't simply ask for a dynamic solution in that fashion. you need to explain what you are doing in detail and why it needs to be dynamic, css is not dynamic so you sound as though you are after a scripting solution, but want one already invented? or are prepared to put a little work in?

Out of interest why do think you would need to add a span to every line, are you planning on doing something similar to that example?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

I am asking several

I am asking several questions.

1.) Has anyone has seen text implemented in this style.

2.) Has anyone seen a tutorial for styling text in this way.

3.) What is this styling technique called.

4.) Has anyone seen this implemented dynamically so that the text would not have to be styled by hand so that it would be useable in a CMS like wordpress.

5.) Using spans with a background color for each individual line of text is the solution that I can see for this effect. Are there better/easier ways of doing it. And yes, I am thinking of doing something similar to the example otherwise I would not be asking questions! Thank you for your kind help Hugo.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

1.) Yes, it's simply one

1.) Yes, it's simply one method one might use to highlight text, however the circumstances where one might use it are few and far between really.

2.) Don't think I've ever seen a tutorial for this as it's not really anything special that needs explaining as such.

3.) Doubt it really has a name, as it's not anything other than adding a background to inline data

4.) You would still need a method of applying a class or some markup, if the user wanted to achieve this they could simply highlight the text in the editing window and add a background. If you really wanted to achieve this without the user having to do anything then you would need a means of identifying a section of text and I'm not sure how you would quite do that. Ought to highlight the fact that WP is not really a CMS and only pays lip service to this idea.

Sorry can't think of much further help on this there may well be approaches I haven't thought of and one of the others might have some bright ideas, but ultimately the WP portion of this is the biggest issue to overcome and won't be easy.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

The issue is I want this to

The issue is I want this to be the style for a whole paragraph of text. If you add a background color to a paragraph then the background color is just a solid block and doesn’t follow the shape of the text.

So I am guessing that the solution is to detect each line of text individually, and then add a background color to that line, then repeat it for the next line etc. Essentially I need to find some code that can detect lines of text, regardless of how it flows within its div container etc.

Maybe this isn’t the best forum to ask these kind of questions. Any suggestions about where I could go?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As my first response

As my first response indicated if you are simply talking about a paragraph of text then you only need wrap the actual character data in a single span, it's an inline element so can only apply to it's actual content.

However it's further complicated if you are talking about users adding this text via a WP posting textarea as entering single or double spaces will result in the text getting wrapped in paragraphs where it sees line breaks

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

Yes, I am wanting to style

Yes, I am wanting to style text in a wordpress template.

Are you saying that this mark up will produce the output I am looking for?

 <p><span class="backgroundHighlight">Paragraph text. </span></p>  

If the HTML editor is used instead of the visual editor would that eliminate double space issues?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes and I think so, but

Yes and I think so, but these are questions that are best answered by testing to see.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

Well it almost works. The

Well it almost works. The issue is adding padding to the end of the text lines. Padding for the span is only added to the end and the start which make sense.

So as I suspected each line needs to have its own span. Unless there is another way.

<html>
<head>
<style type="text/css">
p{
color:#333;
}
 
#textBox{
width:150px;
}
 
.padLeft{
border-left:10px solid #ffff22;
}
 
.colour{
padding-top: 4px;
padding-right: 10px;
background-color:#ffff22;
 
}
</style>
</head>
<body>
<div id="textBox"> 
<div class="padLeft">
<p><span class="colour"> I have lots of words. I have lots of words. I have lots of words. I have lots of words. I have lots of words.</span></p>
</div>
</div>
</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As mentioned earlier the

As mentioned earlier the example adds a faux padding by using a border left same color as background, if you want padding right on each line then yes you will need spans per line and to break the line somehow.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sebben
sebben's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2010-04-09
Posts: 7
Points: 8

Yes, the example I built has

Yes, the example I built has padding on the left.

Do you have solutions to these questions
"a span per line"
"breaking the line"

Or are you going to keep stating the obvious?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

IF you treat users who are

IF you treat users who are trying to help you like that, then you'll soon find yourself with no help.

You asked if there was another way, and Hugo clarified that there wasn't. I don't see a need for the sarky comments.

Verschwindende wrote:
  • CSS doesn't make pies