• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Indicators for External Links

Explorer ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

For ADA compliance external links should have an indicator that the link is an external link, and will move the user off the current site. I do not see a reference on how to program this in RoboHelp 2020 or in prevsious discussions. Does anyone have a suggestion on how to include this indicator?

Views

46

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

My first example did not work, see below.

External Link Indicator.jpg

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

I did this in Classic with a very complex selector directly in the css file.

 

I can't give exact steps in RH2020 as I haven't inspected the output code to know exactly what is required based on the specific output being generated. 

 

Assuming that all external links start with http, you need to set up a hyperlink style that looks for hrefs begining with http and use the :after pseudo element to define the image.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

 

It'll look something like the following, but may need additional classes/elements depending on the RH2020 output. For example in Classic I needed to specify the class assigned to the topic content to prevent the image appearing on links in the skin.

a[href^='http']:after {
    content: url('relative/path/to/image.png');
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 17, 2021 Sep 17, 2021

Copy link to clipboard

Copied

LATEST

Adobe have advised that if you add the code below to the stylesheet used for your topics the icon will appear for external links in your topics and won't affect links in the skin.

 

If you do need the icon for links in your skin, you would need to add it to the LayoutDiff.css. You can find it by right-clicking on the skin and selecting Show in Explorer. (If the skin you are using doesn't have a LayoutDiff.css, you could try creating one with that name and seeing if the change showed up. Otherwise, create a css file called anything you want, then add the stylesheet in the User Assets section of the skin editor.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp