I’m loving using Foundry 3 I wondered whether anyone had any ideas how to underline or highlight an individual word within a heading or paragraph stack for visual emphasis?
Screenshot attached to illustrate what I’m trying to achieve.
Would blacksmith work for this or is custom CSS needed or an alternative stack?
Check the documentation page for the Paragraph tool.
IMHO I wouldn’t use an underline. Too easily confused for a link.
That said, you could take it further with Blacksmith and style the underline and mark tags to fancy them up some. Here’s a quick sample project file.
That’s great! I’ve previously used span in webflow and then offset highlights so I’ll see if I can recreate something like that using blacksmith.
Just some background to add: The <mark> tag is semantic and is used to highlight text of special interest. Here’s a link with some more info as well.
As you said you could also use a span if you like as well if that works for you.
Thanks Adam,
This works perfectly (Blacksmith is awesome btw!)
I ended up exporting an svg from canva and then using that as a background image to create the more custom underline effect for the heading which works perfectly!
You’ve got a great solution already. For my purposes I sometimes will highlight various H2 headers within a long page (I create course websites.) But I didn’t want every highlight to be the same color so I created a set of 6 highlights or “marks”. If you have need more than 1 color then the tools I use are:
For example, one of the color highlights is coded as:
markred {
background-color:rgba(255, 67, 51, 0.3) !important;
padding: .2em;
}
The “0.3” (or similar) is important as it is what gives the mark transparency.
I then set up a Typinator shortcut since I’m lazy at typing and bad at remembering the various codes. I know all 6 colors begin with “mark” and the color names all start with different letters (r, b, l, and so on). So my shortcut within Typinator the case above is:
,mr
easy to remember, easy to use any of the 6 colors.
I know this does not address your issue and you have a fine solution. But in the future it gives a way to develop multiple highlight colors for a page.