1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • Test substitution in content properrt?

    From Stan Brown@21:1/5 to All on Thu Oct 19 09:28:30 2023
    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/

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Y Lee Coyote@21:1/5 to All on Thu Oct 19 15:50:56 2023
    On Thu, 19 Oct 2023 09:28:30 -0700, Stan Brown <the_stan_brown@fastmail.fm> wrote in <MPG.3f9af905f99041669901e2@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
    &#x200b; 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,"/&#x200b;").replace(/\/&#x200b;\/&#x200b;/,"//")
    "]"; }
    }

    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Stan Brown@21:1/5 to Y Lee Coyote on Thu Oct 19 13:44:02 2023
    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_stan_brown@fastmail.fm> wrote in <MPG.3f9af905f99041669901e2@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
    &#x200b; 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,"/&#x200b;").replace(/\/&#x200b;\/&#x200b;/,"//") "]"; }
    }

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

    --
    Stan Brown, Tehachapi, California, USA
    https://BrownMath.com/

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Y Lee Coyote@21:1/5 to All on Thu Oct 19 17:33:59 2023
    On Thu, 19 Oct 2023 13:44:02 -0700, Stan Brown <the_stan_brown@fastmail.fm> wrote in <MPG.3f9b34ec26cf0cf09901e3@news.individual.net>:

    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_stan_brown@fastmail.fm> >> wrote in <MPG.3f9af905f99041669901e2@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
    &#x200b; 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,"/&#x200b;").replace(/\/&#x200b;\/&#x200b;/,"//") >> "]"; }
    }

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

    You have replace
    attr(href)
    with
    attr(href).replace(/\//g,"/&#x200b;").replace(/\/&#x200b;\/&#x200b;/,"//") executed in JaveScript environment.

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


    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)