8000 Footnotes use hard-coded HTML for styling where template should use CSS instead · Issue #4333 · dokuwiki/dokuwiki · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Footnotes use hard-coded HTML for styling where template should use CSS instead #4333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
saschaleib opened this issue Nov 1, 2024 · 2 comments
Open

Footnotes use hard-coded HTML for styling where template should use CSS instead #4333

saschaleib opened this issue Nov 1, 2024 · 2 comments
Labels
Bug

Comments

@saschaleib
Copy link
Contributor
saschaleib commented Nov 1, 2024 •
edited by selfthinker
Loading

The problem

The HTML code that is currently generated for footnotes looks as follows:

<div class="fn"><sup><a href="#fnt__1" id="fn__1" class="fn_bot">1)</a></sup> 
<div class="content">…</div>

This has the following problems:

  1. by typographic convention, the reference number in the text should be indeed superscript, however, the leader number in the actual footnote should not (see e.g. Bringhurst: The Elements of Typographic Style, 4.3.3). Because there are hard-coded <sup> tags in the code, this can not be reasonably fixed in the template style sheets.

  2. the closing bracket style for the footnote numbering is unorthodox, to say the least, and again because it is hard-coded, can not be overwritten in the style sheet.

I suggest to remove the <sup> elements as well as the closing bracket, and in order to keep the current style for those who are used to it, add the same styling in the default template.

The advantage of this change is that the footnote style can be overwritten in CSS (also by the user). The disadvantage will be that other existing templates may not be aware of this change and display the footnote numbering in a different way. I think, however, that the advantages of removing hard-coded styling here are more important.

Version of DokuWiki

"Kaos"

PHP Version

8.2

Webserver and version of webserver

Apache

Browser and version of browser, operating system running browser

Firefox

Additional environment information

No response

Relevant logs and/or error messages

No response
@saschaleib saschaleib added the Bug label Nov 1, 2024
@saschaleib saschaleib mentioned this issue Nov 1, 2024
Closed
saschaleib added a commit to saschaleib/dokuwiki that referenced this issue Nov 2, 2024
@saschaleib
More updates to the footnot symbol style
f80b610 
This small changes gives more flexibility to template authors and/or admins to style the footnotes in CSS. See discussion in issue dokuwiki#4333 for more information.
@saschaleib
Copy link
Contributor Author

After some deliberation, I decided to add some other (minor) changes to allow for even more 8000 flexibility in styling the footnote symbols.

My apologies if this is submitted in the wrong way - I'm not really experienced with pull-requests yet. Sorry for any mess...

Firstly, by wrapping the actual footnote number into a plain <span> element, this number can be hidden and replaced by any other supported list-style-type counter.

In order to do so, the following code can be used to hide the number:

.dokuwiki a.fn_top span,
.dokuwiki div.footnotes div.fn a.fn_bot span {
    display: none;
}

Then, a counter needs to be defined that is reset, once for the <body> element, and once for the footnotes list:

body, div.footnotes {
    counter-reset: footnotes;
}

then this counter can be added to the actual footnote symbols:

.dokuwiki a.fn_top::before,
.dokuwiki div.footnotes div.fn a.fn_bot::before {
	content: counter(footnotes, lower-roman);
	counter-increment: footnotes;
}

This example uses lowercase Roman numerals instead of the regular Arabic numbers. However, any of the list-style-type styles can be used, which includes Armenian, Bengali, Cambodian, Georgian, Hebrew, and various CJK (Han) and Japanese numberings. This may be useful for internationalisation of the Wikis as well.

Moreover, it is also possible to use custom lists. The following is an example for a list of typographic symbols (as used in old-style print) to be used instead of a numeric counter (this contains a workaround for LESS currently not supporting the @counter-style directive):

@counter-style: ~"@counter-style";
@{counter-style} footnote-counter {
  system: symbolic;
  symbols: '*' '⁑' '†' '‡';
}

.dokuwiki a.fn_top::before,
.dokuwiki div.footnotes div.fn a.fn_bot::before {
    content: counter(footnotes, footnote-counter);
    counter-increment: footnotes;
}

The above LESS code defines a counter that uses symbols as used for footnote marks in book-printing, and then uses these instead of the numeric counters.

Obviously, this style is only useful if there is a rather small number of footnotes in a typical wiki page.

Last but not least, the additional data-value attributes allow to address specific footnote levels, if an override of the predefined style is required.

Here is an example of CSS code to override the level 4 only (!) to use the paragraph symbol instead:

.dokuwiki a.fn_top[data-value="4"]::before,
.dokuwiki div.footnotes div.fn a.fn_bot[data-value="4"]::before {
    content: '§';
}

Admittedly, this is only useful in very specific situations, but I think it is a good extra level of specificity to have available for styling footnotes in exactly the way that the wiki operator requires.

@Klap-in
Copy link
Collaborator
Klap-in commented Nov 2, 2024 •
edited
Loading

Interesting work, nice.
Sometime ago @selfthinker collected a lot of accessibility issues. Amongst other, #3464, I assume it might be interesting to check if that provides useful input here as well.

saschaleib added a commit to saschaleib/dokuwiki that referenced this issue Nov 5, 2024
@saschaleib
Footnote HTML fixes
c24a428 
Proposed solution to issue dokuwiki#4333.

These changes replace the hard-coded <sup> and the closing brackets in the footnote numbers with CSS in the default template.

This allows the footnote style to be overwritten by templates and/or user CSS.
@saschaleib saschaleib mentioned this issue Nov 5, 2024
Open
saschaleib added a commit to saschaleib/dokuwiki that referenced this issue Jan 12, 2025
@saschaleib
Footnote HTML fixes
02885b8 
Proposed solution to issue dokuwiki#4333.

These changes replace the hard-coded <sup> and the closing brackets in the footnote numbers with CSS in the default template.

This allows the footnote style to be overwritten by templates and/or user CSS.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Klap-in @saschaleib
0