I cannot find the cause why text in a certain Paragraph Pro stack automatically gets capitalized.If you go here… https://wohnmobile.rabbit-rent.de …and take a look at the middle column in the footer you see that the words in the email address get capitalized and also the small letter “i” in the 2nd line (im Autohaus…). If I’m using a regular text stack or the Scribe stack this doesn’t happen. But why with Paragraph Pro…?
You have a <span> in that paragraph that has the CSS to capitalise the text associated with it.
The span has a stacks id (which is not the main Paragraph Pro id) that is applying that code. I can’t tell where that has come from.
You also have that stacks id as simple text in the HTML after the paragraph.
Have you pasted something from another stack? Or is it some sort of obfuscation stack that is adding those codes?
Perhaps something to do with those codes in the email address? (look at all the %6's in it.)
Thanks for having a look, Andrew. I did have some obfuscating code for the email in there which I now did remove. But still that same strange behavior. Still no idea how to solve this, but will eventually exchange the Paragraph Pro stack with a Scribe stack…
@TemplateRepo: yes, you did look at the correct think. On your screenshot you clearly see the issues I described in my post… ;-)
Put a fresh PPro on the page. Paste your text as plain text Surely it can’t do it then.
Something is changing that paragraph text via JS.
If I disable JS in the browser then it is lower case.
Gotcha. Sorry, I was expecting all caps.
;-)
I now did use a fresh PPro stack on the page, configured it the same way as the other one and now everything is working. Very, very strange… I made a test page with the “faulty” PPro stack at the top and a new instance underneath (orange text), both with the same content and nothing else on the page except the F6 Site Styles stack: Camper | Rabbit Rent Autovermietung GmbH Main-Taunus-Kreis
Ooh, that’s interesting! It’s possible for a stack to work at level? I can see lots of potential for that — I thought we were stuck with Stacks relatively rudimentary text and markdown editing.
Not sure what you mean - would you like to elaborate?
Ha, I put ‘span’ in angled brackets, without escaping them — so it disappeared.
What I was asking is if it is possible for a stack to work at span level? (In other words, applied to some selected text in the middle of a div (or p).
Most “text” stacks (i.e. not headers) are just RW styled text areas. Styled Text (just like the built in page type) is just the addition of <span> or <b> etc tags into the <p> tags in order to style areas with colour, italics, bold etc etc
Styled text does this automatically for you via the buttons for colour, bold italic etc and links.
There is nothing to stop you inserting your own HTML
BUT
DO NOT INSERT BLOCK LEVEL HTML ELEMENTS INTO A PARAGRAPH TAG - this is illegal and the browser will break it apart into many separate <p> tags which will lose the styling and settings of the parent stack.
If you want to add code to text then use a markdown based stack instead. It will protect you from yourself :)
2 Likes
Ha
Yes, indeed. But my interest here is that there are now a large number of text features which need to be applied at a span level (for instance, font-feature-settings). Of course these can be individually coded into the text, but it’s slow and painstaking and it would be nice to just be able to select the text and click a button to apply it. As an example, I have <b><i> or any combination of them together (including <em> and <strong>) set up to trigger small caps. That’s easy with css, and I’ve never yet found a situation where I wanted to use bold italic. But modern fonts can have loads of feature sets, especially scripts with lots of alternate characters and character combinations. Coding a headline can then end up with something like:<span class=‘swsh’>A</span> <span class=‘dlig’>wo</span> <span class=‘ss02’>r</span><span class=‘swsh’>d</span>… in other words, nightmare.
What I would really like is a button bar above my editor panel which I can set up, where I can then select and click, select and click. But just having the button in the HUD — effectively how the opentype features are in InDesign or Publisher — would be fine. (This would seem to be a no-brainer for a stack, but it seems to be a big deal for Stacks).
It’s nothing to do with Stacks, its RW.
All stacks does is expose a RW styled text or markdown area within a stack and provide a little custom editor window to do it. RW’s styled text parser has not changed in years and basically adds colours, bold, italics, underline and links.
I would argue that for complicated multi styled headlines as per your example then simply adding it as XML code in the form of an SVG would be a lot more appropriate that trying to bend a paragraph tag out of shape.
But then it would’t be searchable, or picked up in SEO. And that’s pretty much where we were before the era of @fontface. And it should be possible to style text like this — browsers can handle it, it’s our applications which are not affording it. Opentype features have been a standard in DTP applications for nearly two decades, and it seems to me that RW should be catching up. (Indeed, the type world is moving rapidly to variable fonts, and that is another issue in itself!)
It absolutely is. SVG text nodes are just as searchable as paragraph tags and you can apply all you font features loaded elsewhere on the page to them. Its just XML.
Remember that I said to embed XML code - i.e. inline SVG, not load it into an image tag.
1 Like
In fact, Google now (since 2018) indexes text found in SVG files and loaded in an image tag as well as inline XML
1 Like