summaryrefslogtreecommitdiff
path: root/doc/todo/CSS_classes_for_links.mdwn
blob: ab1a326af87f9302c7915680711192998c8e93a5 (plain)

Hi Joey,

What do you think about CSS classes for links to display link with icon? You probably know that there are wikis with that feature, for example Moin Moin.

Here is a piece of common.css file grabbed from http://wiki.openwrt.org site which is powered by Moin Moin wiki:

a.www:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.http:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.https:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.file:before {content: url(../img/moin-ftp.png); margin: 0 0.2em;}
a.ftp:before {content: url(../img/moin-ftp.png); margin: 0 0.2em;}
a.nntp:before {content: url(../img/moin-news.png); margin: 0 0.2em;}
a.news:before {content: url(../img/moin-news.png); margin: 0 0.2em;}
a.telnet:before {content: url(../img/moin-telnet.png); margin: 0 0.2em;}
a.irc:before {content: url(../img/moin-telnet.png); margin: 0 0.2em;}
a.mailto:before {content: url(../img/moin-email.png); margin: 0 0.2em;}
a.attachment:before {content: url(../img/moin-attach.png); margin: 0 0.2em;}
a.badinterwiki:before {content: url(../img/moin-inter.png); margin: 0 0.2em;}
a.interwiki:before {content: url(../img/moin-inter.png); margin: 0 0.2em;}

You can see that they use a lot of CSS classes for links, but only one CSS class for external links is enough for me :) Please look at my example:

\[[Foo]]                    -> <a href="http://www.mywiki.org/foo.html">Foo</a>
\[[Bar|foo/bar]]            -> <a href="http://www.mywiki.org/foo/bar.html">Bar</a>
<http://www.gnu.org/>      -> <a class="external" href="http://www.gnu.org/">http://www.gnu.org/</a>
[GNU](http://www.gnu.org/) -> <a class="external" href="http://www.gnu.org/">GNU</a>
[RMS](mailto:rms@gnu.org)  -> <a href="mailto:rms@gnu.org">RMS</a>

My best regards,

--[[Paweł|ptecza]]

If you did not already know, you can achieve similar results using CSS3 selectors. Eg: a[href="http://www.foobar.com/"] { foobar: css } or a[title~="Mail"] {text-decoration: none; }. See http://www.w3.org/TR/2001/CR-css3-selectors-20011113/ for a complete list.

Hi Charles,

Thanks for the hint! I don't know CSS3 yet :) What modern and popular WWW browsers do support it now?

If you need to achieve this in IkiWiki itself, I imagine you could create a plugin which runs in the format phase of rendering and search/replaces specific link patterns. This should be a fairly simple exercise in regular expressions.

--CharlesMauch

I've never written plugin for ikiwiki, but I can try if it's simple job :)

--[[Paweł|ptecza]]