Page 1 of 1
Underlining text with offset
Posted: Wed Jun 28, 2023 3:09 pm
by VictorKrs
Hello!
Is it possible to make the text underline with an offset so that it is adaptive.
An example of this text design by link:
https://cloud.mail.ru/public/akC2/Mpqh21v5n
Thank you in advance for your advice!
Re: Underlining text with offset
Posted: Wed Jun 28, 2023 3:35 pm
by crispy68
I'm not at my home computer so I can't say for sure there is an option in WB but you can add some CSS to make it work.
For example, if your text object is Text2, then enter this between the <head> tags:
Code: Select all
<style>
#wb_Text2 a{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>
The offset can be in px or em. Using em's for the offset will scale with the font size. Keep in mind there is no way to make the underline in front of the text if you use a negative offset. For something like that you will need to use a css pseudo-element to achieve it.
Re: Underlining text with offset
Posted: Wed Jun 28, 2023 4:16 pm
by VictorKrs
crispy68 wrote: ↑Wed Jun 28, 2023 3:35 pm
I'm not at my home computer so I can't say for sure there is an option in WB but you can add some CSS to make it work.
For example, if your text object is Text2, then enter this between the <head> tags:
Code: Select all
<style>
#wb_Text2 a{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>
The offset can be in px or em. Using em's for the offset will scale with the font size. Keep in mind there is no way to make the underline in front of the text if you use a negative offset. For something like that you will need to use a css pseudo-element to achieve it.
Many thanks to crispy68! I'll try the recipe a little later...
Re: Underlining text with offset
Posted: Thu Jun 29, 2023 3:45 pm
by VictorKrs
Hello crispy 68!
Your code works with a link. I would like to emphasize with an offset just the text (without a link).
I changed the code to format plain text, but it doesn't work:(
What did I do wrong?
Link to the project:
https://cloud.mail.ru/public/tSTR/A7FeKRPHM
While studying the topic, I found a good resource on the topic:
https://freefrontend.com/css-text-effects/
P. S.
I apologize for maybe elementary questions, but I would like to learn how to use CSS on the WWB when developing websites!
Re: Underlining text with offset
Posted: Thu Jun 29, 2023 3:55 pm
by crispy68
Ooohhh...just a normal underlined text.
Same principle will apply. Just remove the 'a' from the css code. So something like:
Code: Select all
<style>
#wb_Text2 {text-underline-offset:3px;text-decoration-thickness:6px;}
</style>
The only issue is if the text is in the middle of a text block. Not sure if you can target a particular word. However, if you underline the text in the text block, it should create a span tag that could be targeted. I will need to try it first when I get home but I believe it would be something like this:
Code: Select all
<style>
#wb_Text2 span{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>
I will confirm once I get on my computer.
Re: Underlining text with offset
Posted: Thu Jun 29, 2023 4:12 pm
by VictorKrs
Thanks a lot for the comments, Crispy!
I will be grateful to you!!!
I'll get home and try your latest recommendation!
Re: Underlining text with offset
Posted: Thu Jun 29, 2023 8:32 pm
by VictorKrs
Unfortunately it doesn't work:(
Link to the project:
https://cloud.mail.ru/public/MEVj/SbPtPZwkM
Re: Underlining text with offset
Posted: Thu Jun 29, 2023 10:25 pm
by crispy68
It didn't work because you forgot to add the <style> tags in your html box. CSS has to be wrapped in a <style></style> tag when placed in the <head> section.
However, after looking closer at the code, this is what I would use:
Code: Select all
<style>
#wb_Text2 span u{text-underline-offset:15px;text-decoration-thickness:10px;}
</style>
This specifically targets the word even if the word is in the middle of a text box with other text.
Re: Underlining text with offset
Posted: Fri Jun 30, 2023 12:00 pm
by VictorKrs
Good afternoon, Crispy!
Of course I missed the "style" tag! Fixed it and everything worked!
The negative offset (which I wanted to do on the site) unfortunately does not work. I'll look on the Internet for an answer to this question, fortunately I understood how to insert additional html / CSS code into the WWB project.
I will write a proposal on this topic in the "Suggestions" section.
Thank you Crispy for your help and attention to my question!
Re: Underlining text with offset
Posted: Fri Jun 30, 2023 12:35 pm
by crispy68
I don't believe you can have the underline behind the text where it will show thru using CSS. This can only be achieved by using pseudo elements to get the result you want.
Re: Underlining text with offset
Posted: Fri Jun 30, 2023 4:36 pm
by VictorKrs
The links to the code were sent by BaconFries to solve this problem:
https://stackoverflow.com/questions/634 ... ind-a-text
https://stackoverflow.com/questions/260 ... ehind-text
I will try to do it in WWB using this code.
Solution: Underlining text with offset
Posted: Sat Jul 01, 2023 10:12 am
by VictorKrs
Good afternoon!
Follow the link to the WWB project file with the solution of the problem of underlining the text with a negative offset:
https://cloud.mail.ru/public/yXEj/GBMVNhQ1L
Animation and effects with underscores (or rather the background of the text), I think that is also feasible, since there is a lot of ready-made code for this on specialized developer sites.
Thank you all for participating in the discussion of the topic!