Page 1 of 1

External web links in footer

Posted: Tue Dec 13, 2022 3:22 pm
by sure4369
Hi,

I want to publish Link1 text and Link2 text in the footer of my document exactly as shown below. These two texts should redirect to respective external web links that we will define in the CSS.
image.png
Please provide a resolution for this. I am using "DITA Map PDF - based on HTML5 & CSS" scenario.

Thanks
Sure

Re: External web links in footer

Posted: Tue Dec 13, 2022 3:34 pm
by julien_lacour
Hello,

You can check in our user-guide how to add a link in headers and footers (note there are two methods).
For the display, you can take a look at my answer on this post.

Regards,
Julien

Re: External web links in footer

Posted: Tue Dec 13, 2022 11:15 pm
by sure4369
I am using this code but only the second one "Turn" is publishing in the output bcz "Turn" is overriding the first one. Am I doing something wrong? sorry in advance if I am doing a silly mistake. I am trying out CSS for a couple of days.

Code: Select all

@page {
  @top-center {
    content: "Link"; -oxy-link: "https://www.oxygenxml.com/" \A;
    content: "Turn"; -oxy-link: "https://www.Google.com/" ;
    color:blue;
  } 
}

Re: External web links in footer

Posted: Thu Dec 15, 2022 2:21 pm
by sure4369
Hi Julian,

Thanks for ur suggestion.
Is there any workaround?

Regards,
Sure

Re: External web links in footer

Posted: Thu Dec 15, 2022 3:31 pm
by julien_lacour
Hello,

There is a workaround, you can use the SVG method to add two links:

Code: Select all

<svg width="50" height="40" viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="https://www.oxygenxml.com/">
        <rect x="0" y="0" width="50" height="20" opacity="0"/>
        <text x="5" y="15" fill="blue">Link</text>
    </a>
    <a xlink:href="https://www.google.com/">
        <rect x="0" y="20" width="50" height="20" opacity="0"/>
        <text x="5" y="35" fill="blue">Turn</text>
    </a>
</svg>
Don't forget to refer the SVG in the page-margin box after that:

Code: Select all

@page {
  @top-center {
    content: url("links.svg");
  }
}
Regards,
Julien