[SOLVED] nbsp in css

colak · Today 05:36:09

I’ve been trying to add a non breaking space in my css for some years now but the browser appears to be ignoring it.

a[rel~=external]:after{content:"\00a0\21D7";

My suspicion is that the \21D7 entity, which translates to ⇗ does not respect the non breaking space before it. Is there a work around?

phiw13 · Today 06:46:42

What are yo trying to achieve?

The thing is, your ::after is a separate node in the generated dom, so that space will not collapse in the presence of a space just preceding it.

colak · Today 07:17:35

phiw13 wrote #343554:

What are yo trying to achieve?

The thing is, your ::after is a separate node in the generated dom, so that space will not collapse in the presence of a space just preceding it.

I’m trying to signify external links but also keep the ⇗ with the linked text.

Although there is no issue on www.neme.org/texts/revisiting-inarticulacy#notes, note 15, if you change the width of your browser, ⇗ moves to the next line. The issue appears in other posts even without changing the browser width.

colak · Today 07:33:09

The magic of the forum has solved it. As I’m defining all external links in a shortcode, I added the html entities there, deleted the pseudo element and all works as expected.

phiw13 · Today 08:23:17

colak wrote #343556:

The magic of the forum has solved it. As I’m defining all external links in a shortcode, I added the html entities there, deleted the pseudo element and all works as expected.

Well now your arrow is fully outside of the link, and not part of it, and part of the actual content. If someone (indexing bot, screen reader, …) reads the text, the ⇗ will be added as part of the text itself.

Possible workaround to your conundrum: keep your generated content and

remove the non-breaking space part (\00a0)
add a little bit of padding at the start: ::after { padding-inline-start: .25ch; }

Or, add your white-space node inside the link (<a href=”“>text text </a>@) and use you simplified ::after { content: "\21D7"; }. Since you are using a short code, you just need to add it there.

colak · Today 15:58:03

phiw13 wrote #343558:

Well now your arrow is fully outside of the link, and not part of it, and part of the actual content. If someone (indexing bot, screen reader, …) reads the text, the ⇗ will be added as part of the text itself.

Possible workaround to your conundrum: keep your generated content and

remove the non-breaking space part (\00a0)

add a little bit of padding at the start: ::after { padding-inline-start: .25ch; }

Or, add your white-space node inside the link (<a href=”“>text text </a>@) and use you simplified ::after { content: "\21D7"; }. Since you are using a short code, you just need to add it there.

I agree with you that ⇗ should not be indexed! Why do you have to be so right all the time:)

I’ve tried both your suggestions and the ⇗ moves to the next line when available browser width space runs out.

ps. I have checked the net extensively about this and no solution worked.

skewray · Today 16:48:55

Coming from a state of 99% ignorance, why doesn’t <span style="white-space:nowrap"> work?

colak · Today 17:12:08

skewray wrote #343562:

Coming from a state of 99% ignorance, why doesn’t <span style="white-space:nowrap"> work?

That may work when I have text for the link but I also use it without text (just showing the urls). In such cases I use a regex to shorten the urls and also create spaces in order for that url to to wrap. Adding white-space:nowrap will conflict with this function

Textpattern CMS

Textpattern CMS support forum

#1 Today 05:36:09