Codimd: Remove URLs next to links when export to PDF using browser built-in print

[AntonioTsai]

When I export a note to PDF by Chrome built-in print, the URL will show next to the link,
like this

The link is still available after export to PDF, so it seems we can remove the URL after the link?
And this can be done by adding CSS rule.

@media print {
    a[href]::after {
        content: none !important;
    }
}

[SISheogorath]

I would say it's a wanted behavior.

https://github.com/hackmdio/hackmd/blob/master/public/css/extra.css#L364-L366

But feel free to file a pull request, I'm sure we can talk about changing it as it makes sense to me, to hide it in a PDF.

[ccoenen]

The previous pull request was closed, since it removed all hrefs (which would have also meant: no urls in _printed_ documents). If anyone wants to go about this in a different way, feel free to propose a pull request!

[SISheogorath]

For the document we want to be without printed links we can add the following at the bottom:

<style>
@media print {
    a[href]::after {
        content: none !important;
    }
}
</style>

https://hackmd.io/IYFlAYFMBMGYFoActECZ4hAY2vAnLJAEZKR7iIBmA7JGQGyVA===#

https://hackmd-ce.herokuapp.com/g82gJT45SBGZypXmpDbhNw

It works. I think we should provide a page (like the features page) with "Hacks" to show some of the powerful CSS features we can simply add to a document.

[Nitiquita]

I can try my hand at this.

[Nitiquita]

To clarify, do you want to give the user the option of having the links printed or not printed?

[SISheogorath]

For me documenting the possibility of how to omit the links would be enough. But I'm open to ideas that allow toggling URL in the print-view.

If we want to provide it via a toggle, I would go for an option in the MetaYAML section. But if there are drafts for a different solution I would welcome that, too. Buttons are more self-documenting but need more UI/UX thoughts.

[ccoenen]

@Nitiquita did you get anywhere with this? If not, that's also OK, I just want to double check if anyone is working on this!

[Nitiquita]

@ccoenen, sorry! I'm not working on it.

[ccoenen]

No problem, no need to apologize.

[adbahrani]

is not working with Chrome. Chrome automatically create that link base on url, this feature need to be disable in the browser it self.

[AntonioTsai]

@adbahrani which version of Chrome & OS are you using?

<style> @media print { a[href]::after { content: none !important; } } </style>

The script works in my case.
Browser: Chrome Version 68.0.3440.106
OS: Ubuntu 17.10

[adbahrani]

@AntonioTsai, I'm using Version 68.0.3440.106 (Official Build) (64-bit) OS Windows 10.
And I've tried on FirFox as well. When I print there's an option for Head and footer checkbox, only un checking that would make those links goes away. I've been try to remove the how style no avail. If have a jsfiddle or live example would be helpful

[SISheogorath]

@adbahrani You can provide a example on https://hackmd-ce.herokuapp.com

[magnokf]

thanks. worked fine for me

[ARVINDTRONICS]

Thanks for this solution.Worked for me !