Test substitution in content properrt?

Stan Brown

unread,

Oct 19, 2023, 12:28:35 PM10/19/23

to

I have the following in my CSS to display the URLs of
some links when the web document is printed:

@media print { a.showURL:after
{ content:" [URL " attr(href) "]"; }
}

That works fine, except that if a long URL happens to
occur midway on a line, it gets moved to the next line,
leaving a short line.

What I'd like to do is insert a zero-width space
 after every slash except the initial https://.
I haven't been able to find a CSS way to do that, but I
thought it was worth asking in case I missed something.

Or is there some other way to accomplish this? I
suppose I could use attr(title) instead of attr(href)
and put the URL-with-ZWSPs in the title attribute, but
that seems pretty clunky and will look ugly if a person
reading on screen happens to hover over the link.

--
Stan Brown, Tehachapi, California, USA

https://BrownMath.com/

Y Lee Coyote

unread,

Oct 19, 2023, 3:51:02 PM10/19/23

to

On Thu, 19 Oct 2023 09:28:30 -0700, Stan Brown <the_sta...@fastmail.fm>
wrote in <MPG.3f9af905f...@news.individual.net>:

>I have the following in my CSS to display the URLs of
>some links when the web document is printed:
>
>@media print { a.showURL:after
>{ content:" [URL " attr(href) "]"; }
>}
>
>That works fine, except that if a long URL happens to
>occur midway on a line, it gets moved to the next line,
>leaving a short line.
>
>What I'd like to do is insert a zero-width space
> after every slash except the initial https://.
>I haven't been able to find a CSS way to do that, but I
>thought it was worth asking in case I missed something.
>
>Or is there some other way to accomplish this?

Yes. Use js
{ content:" [URL "
attr(href).replace(/\//g,"/").replace(/\/\//,"//")
"]"; }

>}

> I
>suppose I could use attr(title) instead of attr(href)
>and put the URL-with-ZWSPs in the title attribute, but
>that seems pretty clunky and will look ugly if a person
>reading on screen happens to hover over the link.

Y.

Valid return address is <YLeeCoyote (at) juno.com>
(Posting address is for the spammers)

See my stories at: https://yleecoyote.asslr.org/
Status page at: https://yleecoyote.weebly.com/

P & E

Stan Brown

unread,

Oct 19, 2023, 4:44:07 PM10/19/23

to

On Thu, 19 Oct 2023 15:50:56 -0400, Y Lee Coyote wrote:
>
> On Thu, 19 Oct 2023 09:28:30 -0700, Stan Brown <the_sta...@fastmail.fm>
> wrote in <MPG.3f9af905f...@news.individual.net>:
>
> >I have the following in my CSS to display the URLs of
> >some links when the web document is printed:
> >
> >@media print { a.showURL:after
> >{ content:" [URL " attr(href) "]"; }
> >}
> >
> >That works fine, except that if a long URL happens to
> >occur midway on a line, it gets moved to the next line,
> >leaving a short line.
> >
> >What I'd like to do is insert a zero-width space
> > after every slash except the initial https://.
> >I haven't been able to find a CSS way to do that, but I
> >thought it was worth asking in case I missed something.
> >
> >Or is there some other way to accomplish this?
> Yes. Use js
> { content:" [URL "
> attr(href).replace(/\//g,"/").replace(/\/\//,"//")
> "]"; }
> >}

Thanks for replying, but the W3c css validator threw four "CSS parse
error"s on that line.

Y Lee Coyote

unread,

Oct 19, 2023, 5:34:04 PM10/19/23

to

On Thu, 19 Oct 2023 13:44:02 -0700, Stan Brown <the_sta...@fastmail.fm>
wrote in <MPG.3f9b34ec2...@news.individual.net>:

You have replace
attr(href)
with

attr(href).replace(/\//g,"/").replace(/\/\//,"//")

executed in JaveScript environment.

I will guess something like
<script> var
qqqq=attr(href).replace(/\//g,"/").replace(/\/\//,"//")
</script>
Then
@media print { a.showURL:after
{ content:" [URL " qqqq "]"; }
}
but you must be sure that qqqq is known where it is used.