How to assign a CSS class to normal text

I have found myself wanting for this feature many times. I don’t know why I never thought to create it myself as @texnixe has suggested.

To build upon this, do you think it should support an option for header’s as well? Or should those be a separate tag all together?

(text: here’s my text class: css3)
(text: here’s my text class: css3 size: h1) size… or format… or whatever seems appropriate?

2 Likes

Hi Luke, nice to hear Definitely I’m not a really able to code php, just basic things! I’ll have to spent time on that if I need to implement! I’ll appreciate your help :wink:

bootstrap is already implemented so most of the formatting tags are working with css

so everything should work automagically with

(text: here's my text class: h1)

Here’s a pretty basic example for a text.php Kirbytag

<?php

kirbytext::$tags['text'] = array(
  'attr' => array(
    'class'
  ),
  'html' => function($tag) {

  	
    $class = $tag->attr('class');
    $text = $tag->attr('text');
    

    $html = '<p class="' . $class . '">' . $text . '</p>'; 
    return $html;

  }
);

It outputs the text in a paragraph tag with a class assigned to it. You can extend this to do whatever you want to do with it.

2 Likes

Also, remember that you can always use HTML in Markdown documents.

1 Like

Thanks so much @texnixe really appreciated! Also thanks @twirx I didn’t know I can use html tags

Too easy!

If you enable markdown extra in your config.php http://getkirby.com/docs/advanced/options you can also use classes with certain elements like headers https://michelf.ca/projects/php-markdown/extra/#spe-attr

Using Kirbytext, you can easily create more complicated markup without the hassle of typing HTML, e.g. info boxes with a badge or whatever you can imagine …

Great solution.

To match the functional approach of Kirby, I might suggest the string concatenation be updated to:

$html = new Brick('p')->addClass($class)->text($text);

This would also allow the Kirbytag to be extended to support all sorts of HTML tags, say as (tag: span class: my-class text: I'm a custom HTML element!)

2 Likes

To be honest I wouldn’t want to have such a tag. It couples content with presentation and that makes everything less maintainable in the future.

Nor me, cause I wouldn’t want editors to put in all sorts of tags and classes freely. And it wouldn’t make that much sense, because editors usually don’t create the styles for all the classes they might assign anyway. Also, while kirbytext is very powerful, there are limitations regarding what you can or cannot put into such a tag, e.g. parenthesis within kirbytags don’t work and it seems that they can’t be escaped either, therefore it is easy to break things when not used with caution.

IMHO, there are use cases where such tags make perfect sense, like the message box example I mentioned earlier that really makes your life easier if you have to write technical documentation, for example. The alternative would be a lot of ugly html elements which make your files a lot less readable.

Right, we’re suddenly dependent upon Kirby/Kirbytext parser to extract content from the system.

I’m going to leave it, because it does answer the original question— however poor a decision it may be to implement. :wink:

Plain HTML is the way to go, if you must do this! Otherwise, consider how you might break apart this field into more granular information, or write more specific CSS selectors to match particular inline-level elements…

Actually that’s even worse. In my opinion, you should write specific Kirbytags for every different type of special content. That makes it very easy to change the classes or even the markup in the future.

@lukasbestle What would you do if you were to include a link within text in a Kirbytag? Honestly, I sometimes see no other way than to use plain ol’ HTML even if it makes the text files less readable. There is one other advantage to not using Kirbytags at all: you can easily export your text files if you need to.

However, I really like Kirbytags so I use them whenever it makes sense. For editors, a couple of easy Kirbytags are easier to handle than html as long as you don’t have to use more than a few for specific use cases.

If it’s a special type of link (with its unique class), I’d create its own Kirbytag (like calltoaction or whatever is needed). That semantically marks up this link, so the actual HTML behind it can change in the future (and the editors won’t have to care about that when creating content).

That’s definitely true! But in my opinion, having clean CMS-specific markup is better than having hard-to-read and unmaintainable universal markup. Since the structure of a Kirbytag is quite easy, you could always parse only the Kirbytags and export them as HTML together with the standard Markdown (basically to replace the Kirbytags with HTML but to keep the standard Markdown as it is) to move to another CMS or use the content in another context.

Well, yes, but how can you have a Kirbytag within a Kirbytag? I haven’t found a way to achieve that?

Ah, sorry for the confusion. That’s possible in theory (by calling kirbytext() from within the tag code) but as I wrote in the GitHub issue about that topic, that’s not really stable and robust.

Very complex structures with multiple paragraphs and other tags that should be custom per call of a Kirbytag are not so easy and elegant to implement with Kirbytags (that’s where I would actually use HTML or rethink my markup). But if you can abstract a Kirbytag so that everything can be controlled by simple arguments, it’s definitely the way to go.

@lukasbestle Yes, I’m absolutely with you. As I said before, I would try to avoid plain HTML as much as possible as well.But as you mentioned, complex structures are not elegant; while it is possible to use multiple paragraphs by separating the text with otherwise unused characters, this looks rather hacky, same with a list tag I use. Those are fine for personal use but not necessarily for client projects. In each use case, the challenge is to find the best way to structure your content and to make it as easy as possible for future editors.

3 Likes

So cool thanks for this @texnixe

:slight_smile: :smile:

@texnixe i have some more Questions to this tags.

When i use the tag it work fine unitl i have another ( or ) in the text then it breaks, probably because it thinks another function starts.

how would i escape this problem?
my example

(text: Video & Filmstudio mit über 100 qM Hier sind auch der Jib, der Kran (18 Fuss) die Dollies etc. stationiert wenn sie nicht bei einem Aussendreh verwendet werden.   Spider-Dolly, Porta Jib, Power Head, Schulterrig mit Remote Follow-Focus, Kompendium mit Follow-Focus Projektionswand 3M Breite, Kies für Foley. class: white__layout__text)  

it breaks my html when it come to the (18 Fuss).

best, pascal

Yes, that is a known problem, and until today, there is no solution to that problem. I think using HTML entities instead of the parenthesis works. The only other way around it that I know of, would be to create something similar to the columns plugin, where you have a start tag and an end tag and can put anything in between, even other Kirbytags.

Or, check out this post: Way to Use Parenthesis inside Kirbytag?

1 Like

I see!
very good, i will try to input this method into my kirbytags, it look like a simple an logic solution to me top use [] instead of ().

thx @texnixe

best, pascal