[SOLVED] nbsp in css

colak · Yesterday 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 · Yesterday 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 · Yesterday 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 · Yesterday 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 · Yesterday 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 · Yesterday 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 · Yesterday 16:48:55

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

colak · Yesterday 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

phiw13 · Today 02:18:10

colak wrote #343560:

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

Strange, I would have thought something like this to work:

<a href="" rel="external">link text</a>

a[rel~=external]::after {
  content:"\21D7";
  padding-inline-start: .25ch; /* adjust value to taste */
 }

A slightly constrained text case: dev.l-c-n.com/_temp/non-breakin-space-colak.html. The first line inserts just the generated content; the second line insert a non-breaking space after the last word inside the link. The third adds some tiny bit of padding to the generated content.

colak wrote #343563:

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

In case of URL strings, word-break: break-all; does works perfectly, with the benefit if the user copies the whole block, the URL is still usable. But you probably don’t want words in regular text to break. Depending on how your regex works perhaps just add a class in case of URL strings?

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 05:36:09