Forum

Thread tagged as: Question

Text in a css span within a paragraph

How do I structure a Perch template so that within a paragraph the editor can type in a few words within a span that has a css class. The span, for bold caps in a colour, is at the start of the text, within the <p> tags of the para.
Peter Hammarling

Peter Hammarling 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Could you show us an example?
Peter Hammarling

Peter Hammarling 0 points

5 years ago

Before installing Perch, the text looks like this. How can I structure this in Perch so that editors will see the words they're enclosing in a span and the rest of the text?

<div class="class-name">
<p><span class="class-name">Lorem ipsum</span> dolor sit amet consecetur etc</p>
</div>
Simon Clay

Simon Clay 127 points

5 years ago

Here's one way:

<div class="class-name">
<p><span class="class-name"><perch:content id="lead_words" type="text" label="Lead words" /></span> 
<perch:content id="text" type="textarea" label="Text" html="false" />
</p>
</div>
Peter Hammarling

Peter Hammarling 0 points

5 years ago

Thanks Simon. I had considered a structure like that but thought that it wasn't ideal because it would require adding a separate textarea for subsequent paragraphs (which don't begin with spanned words). The overall number of paragraphs isn't known and will vary.

Perhaps the only way is to present editors with a text field for the first paragraph (as in your example) and then a textarea (without html="false") for subsequent content.
Robert Ketter

Robert Ketter 103 points

5 years ago

Or use blocks. (1) block with <p> tags then Bloch with <span> tags. This way you can jump back and forth. May need to break <p> tags across (2) blocks though so you can put span between.
Peter Hammarling

Peter Hammarling 0 points

5 years ago

I haven't used blocks so I'm not familiar with how they work - I'd have to do some test layouts. Thanks for the suggestion.

Another possibility I was considering was to declare in the css, just for the div in question, some styles against an unneeded html tag like h5, for example

.main-content h5 {
   display: inline;
   margin: inherit;
   color: whatever;
   font-weight: 700;
   text-transform: capitalize; }

This way they can style a word or phrase anywhere within a para within the Perch 'textarea' editing field (I assume, though I haven't tested it yet).

Although this would be rather unsemantic it would at least avoid presenting editors with lots of fields and would work in any para within that div, so would be flexible. And I wouldn't have to explain to the editors what a 'span' is, but only put a note in the help text saying to use h5 when they want bold coloured words. I've no idea if it would affect seo for bad or good.

EDIT: actually after testing, I find (duh, of course) that using an h tag requires

.main-content h5 + p {
   display: inline }
.main-content p + h5 {
   display: inline }

and also requires the editor to make 2 hard returns before and after the styled bit of text, which isn't very intuitive.

An easier solution to achieve a span-like effect is to use the tag strike-through, styled with the css

del { text-decoration: none;
   other styling etc; }

though this seems to me wildly unsemantic.

Any other opinions/suggestions gratefully received.