archive_me1Add my vote for this tag create new tag
, view all tags

Feature implemented: Better Links To Headings

I have difficulty to apply CSS to headers, because these are rendered as links. These links are needed by TOCs, but it shouldn't be necessary to render the whole header as a link.

Currently, the TWiki generated HTML looks like:

<h1><a name="_MyHeader"> MyHeader </a></h1>

but the same functionality can be achieved using:

<h1><a name="_MyHeader" /> MyHeader </h1>

... and this is XHTML conforming.


The proposed solution is trivial: change "sub makeAnchorHeading" in TWiki.pm from

$text = "<nop><h$theLevel><a name=\"$anchorName\"> $text <\/a><\/h$theLevel>";


$text = "<nop><h$theLevel><a name=\"$anchorName\" ></a> $text <\/h$theLevel>";

Update: apparently you cannot close the a tag like this: <a />. But <a></a> (no text between opening and closing tags) is allowed.

See test page and W3C validation result.


if( $hasAnchor ) {
        # FIXME:
construct can be repaired simultaneously by removing the if - then by the line above, it is valid in all situations.

-- ArthurClemens - 15 Jan 2004

(Off topic)

could you post the css, please? are you using qualifiers like :hover, :link, :active to separate anchors with links versus those that don't? (i had this problem with some skins i made).

however, even if it's a matter of "fixing" the css, your proposed change is still quite reasonable, and could be implemented independent of css changes.

-- WillNorris - 15 Jan 2004

I have the problem when defining a general a:hover. So then I must use:

#topic h1 a:hover,
#topic h2 a:hover,
#topic h3 a:hover,
#topic h4 a:hover,
#topic h5 a:hover,
#topic h6 a:hover {
   text-decoration: none;
Pretty ugly. See links at PatternSkinDev.

-- ArthurClemens - 15 Jan 2004

what about :link:hover ? (this was the problem i had in the past, using just :hover (which is the same as a:hover, i think). or, i could be completely wrong about all this and not know what i'm talking about ( a distinct possibility smile )

:link:focus, :visited:focus   { color:#f96; }
:link                         { color:#f96; }
:visited                      { color:#f96; }
:link:hover, :visited:hover   { color:#666; }
:link:active, :visited:active { color:#666; }
:link:focus, :visited:focus, :link, :visited, :link:active, :visited:active   { text-decoration:none; }
:link:hover, :visited:hover   { text-decoration:underline; }
-- WillNorris - 16 Jan 2004

This does improve things significantly. No more ugly hacks needed. Thanks.

-- ArthurClemens - 16 Jan 2004

maybe it's better to keep your "ugly" css, but add the capability to click on the header (to get an easy url to copy/paste in order to refer to a specific section in a page)?

$text = qq{<nop><h$theLevel><a name="$anchorName" href="#$anchorName">$text</a><\/h$theLevel>};
or maybe it isn't so important if sectional include capabilities are available?

-- WillNorris - 15 Jan 2004

The problem I have with the ability to click on the header is that it is

  • invisible, so how to know how to use it?
  • visible, but then the headers become really prominent links

I need to think about a solution that is AND visible AND not ugly.

-- ArthurClemens - 16 Jan 2004

The above proposal to enable clean CSS for anchors independent from headlines is useful. It allows to use a:hover properties. And I learnt about :link:hover, which works better anyway smile

BTW: it is a good idea to distinguish visited links, although it might not look that cool.

Offering links at header labels is a super-poweruser feature only. For all others, it causes problems:

  1. If it's a visible link, you click and end up in the same place. So you ask yourself: what is going on here? Even if you do understand, it's ugly.
  2. If it's not visible and you happen to hover over it, suddenly the appearance changes. If you're curious and click, you're left wondering even more: what hidden functionality is going on behind the scenes?

My 2¢ against linkable headlines, PeterKlausner - 16 Jan 2004

Using the name as an anchor is invisible in Internet Explorer, but looks like a real link in Mozilla and Opera. Better behavior can be achieved using an id anchor in the header tag. I use this small patch to TWiki.pm (01Feb2003 release):

<     if( $hasAnchor ) {
<         # FIXME: '<h1><a name="atext"></a></h1> WikiName' has an
<         #        empty <a> tag, which is not HTML conform
<         $text = "<nop><h$theLevel><a name=\"$anchorName\"> </a> $text <\/h$theLevel>";
<     } else {
<         $text = "<nop><h$theLevel><a name=\"$anchorName\"> $text <\/a><\/h$theLevel>";
<     }
>     $text = "<nop><h$theLevel id=\"$anchorName\"> $text <\/h$theLevel>";
One nice result is that the anchor no longer interferes with $text, so we don't need the if/then logic anymore.

This might be better done in DefaultPlugin, but I haven't learned how yet.

-- CarlPatten - 11 Feb 2004

I've applied the patch to twiki alpha:

    my $headerprefix = "<nop><h$theLevel>";
    my $anchorprefix = "<a name=\"$compatAnchorName\"></a>" . "<a name=\"$anchorName\"></a>";
    $text = "$headerprefix$anchorprefix$text</h$theLevel>";

I have not included the capability to click on the header (to get an easy url to copy/paste in order to refer to a specific section in a page)

-- ArthurClemens - 18 Apr 2004

I did some code refactor. I left the empty anchors alone, however this is not allowed if I interpret the XHTML spec correctly. Nevertheless, the w3.org HTML validator is happy and browsers do not seem to mind.

The function is now:

sub makeAnchorHeading
    my( $theHeading, $theLevel ) = @_;

    # - Build '<nop><h1><a name="atext"></a> heading </h1>' markup
    # - Initial '<nop>' is needed to prevent subsequent matches.
    # - filter out $regex{headerPatternNoTOC} ( '!!' and '%NOTOC%' )
    # CODE_SMELL: Empty anchor tags seem not to be allowed, but validators and browsers tolerate them

    my $anchorName =       makeAnchorName( $theHeading, 0 );
    my $compatAnchorName = makeAnchorName( $theHeading, 1 );
    $theHeading =~ s/$regex{headerPatternNoTOC}//o; # filter '!!', '%NOTOC%'
    my $text = "<nop><h$theLevel>";
    $text .= "<a name=\"$anchorName\"> </a>";
    $text .= "<a name=\"$compatAnchorName\"> </a>" if( $compatAnchorName ne $anchorName );
    $text .= " $theHeading </h$theLevel>";

    return $text;

-- PeterThoeny - 19 Apr 2004

Y'know, I ran into this problem, too, and it can be solved without patching TWiki. Hint: The correct way to select the item in CSS is a[href].

Then again, generating valid (X)HTML is an even better idea.

-- EberhardSchulz - 28 Jul 2004

TopicClassification FeatureDone
TopicSummary Removes anchor links from header content and places them before the text to fix 'header becomes link'


AssignedToCore ArthurClemens
ScheduledFor CairoRelease

SpecProgress 100%
ImplProgress 100%
DocProgress 100%
Edit | Attach | Watch | Print version | History: r12 < r11 < r10 < r9 < r8 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r12 - 2004-07-28 - EberhardSchulz
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.