Support » Developing with WordPress » toggle link URL into “show link” text

  • Resolved arsm

    (@arsenalemusica)


    I wish to have email/web links toggle to “show email/show website”, exactly like this. But I need to apply it globally to the email/web link contained in the posts.
    I have no idea where to start from.

Viewing 9 replies - 1 through 9 (of 9 total)
  • This is a bad user experience, because it changes what a link is for, but especially for accessibility reasons. And if you put this script on all your links, they don’t function as links any more, so you can’t navigate your site.

    Moderator bcworkz

    (@bcworkz)

    People wish to obscure embedded email links to stymie scraper bots from harvesting email addresses which they can then sell to spammers. If that’s your intent, there are several strategies that have been employed. They all have disadvantages. I think the least objectionable is to have JavaScript swap in the correct mailto: address and link text, replacing the initial invalid address. AFAIK scraper bots typically don’t execute JavaScript.

    To protect the real address in JavaScript files, it can be separated into parts which could themselves be alternately encoded. On page load, the script decodes and assembles the parts prior to inserting into the DOM. This is only feasible for a limited set of predefined email addresses.

    I’m unsure of the impact of such a technique has on screen readers. If they execute JavaScript it should be fine.

    Thread Starter arsm

    (@arsenalemusica)

    Obscuring the link to bots came as a secondary advantage. My real intention was to have the links shortened because I need them on one line (in order to make content at equal height), but then I thought that it was good also for privacy (by disabling the mailto/linkto feature) because these are not internal links but real links to people/companies.
    So the real goal would actually be not to toggle the link with a custom text, but use a custom text (e.g. “send them email / visit their site”) on the respective email/web links.
    I cannot code such thing, plus I guess this should be applied to a template.

    Moderator bcworkz

    (@bcworkz)

    Anything on the page that changes based on user interaction (click event for example) has to be done with JavaScript or one of its derivatives like jQuery. What you apply to a template determines what is sent to the browser. After that, it’s out of PHP’s and the template’s scope.

    URLs shouldn’t be considered sensitive information. Emails yes, not URLs. There shouldn’t be a need to display the actual URL (or email) in links. Setting it as the href/mailto attribute is enough. The link text can be something more meaningful like a human readable description of where the link takes you.

    Other than for obfuscating email addresses, don’t mess around with altering actual URLs. As Joy points out it will cause accessibility issues. If you really want a shorter URL, use an URL shortener service. But I’d advise against even that. We don’t even allow shortened URLs in these forums. They are used to obscure malicious links. Everyone should be suspicious of shortened URLs.

    Thread Starter arsm

    (@arsenalemusica)

    I appreciate your tips and I guess I will stick with it.
    Then, in order to make them in one line and not exceeding, say, 150px, would it be possible to apply the text-overflow:ellipsis; property to all these links?

    Moderator bcworkz

    (@bcworkz)

    150px isn’t very wide, but yes, text-overflow will keep it looking tidy without being misleading.

    Thread Starter arsm

    (@arsenalemusica)

    all right thank you. I have a small width container (owl-carousel items) therefore I cannot let these text be too long. 🙂

    Thread Starter arsm

    (@arsenalemusica)

    …sorry to pop up again here. I’m playing with the properties but I cannot make ellipsis together with max-width:25ch (or max-width:150px). It seems that one exclude the other. Is it not possible to limit the width and still add the “…” ?
    It should be solved using display:inline-block; but then it kills the display:-webkit-box; -webkit-line-clamp:1; behaviour.
    I need: 1 line + max-width + ellipsis. How?

    (I still think I’d better do with a text link, though)

    UPDATE: my bad, I was using white-space:normal; instead of nowrap

    • This reply was modified 1 month, 1 week ago by arsm.
    Moderator bcworkz

    (@bcworkz)

    So nowrap resolved your issue?

    Just in case not, these rules should work:

        max-width: 150px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

    Note the ellipsis are within the 150px, not in addition to.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.