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.
Solution
The proposed solution is trivial: change "sub makeAnchorHeading" in TWiki.pm from
$text = "<nop><h$theLevel><a name=\"$anchorName\"> $text <\/a><\/h$theLevel>";
to:
$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.
The
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 )
: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
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:
- 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.
- 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