Feature #3074
open
Indention in Wiki of headings and corresponding content based on heading-depth
0%
Description
It seems to me that such a feature would improve the readability in the Wiki-module.
What do I mean with this exactly? This:
- Current wiki
Heading 1 ---------------- Text, text, text, text, text, text. Heading 1.2 ---------------- Text, text, text, text, text, text. Heading 1.2.1 ---------------- Text, text, text, text, text, text.
- Preferred wiki
Heading 1 ---------------- Text, text, text, text, text, text. Heading 1.2 ---------------- Text, text, text, text, text, text. Heading 1.2.1 ---------------- Text, text, text, text, text, text.
A solution for this could be changing the following snippet of code (lines 3 upto 7 of source:/trunk/public/stylesheets/application.css#L3) from:
h1, h2, h3, h4 { font-family: "Trebuchet MS", Verdana, sans-serif;}
h1 {margin:0; padding:0; font-size: 24px;}
h2, .wiki h1 {font-size: 20px;padding: 2px 10px 1px 0px;margin: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; color: #444;}
h3, .wiki h2 {font-size: 16px;padding: 2px 10px 1px 0px;margin: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; color: #444;}
h4, .wiki h3 {font-size: 13px;padding: 2px 10px 1px 0px;margin-bottom: 5px; border-bottom: 1px dotted #bbbbbb; color: #444;} to h1, h2, h3, h4 { font-family: "Trebuchet MS", Verdana, sans-serif;}
h1 {margin:0; padding:0; font-size: 24px;}
h2, .wiki h1 {font-size: 20px;padding: 2px 10px 1px 0px;margin: 0 0 10px 0; border-bottom: 1px solid #bbbbbb; color: #444;}
h3, .wiki h2 {font-size: 16px;padding: 2px 10px 1px 0px;margin: 0 0 10px 15px; border-bottom: 1px solid #bbbbbb; color: #444;}
h4, .wiki h3 {font-size: 13px;padding: 2px 10px 1px 0px;margin: 0 0 5px 30px; border-bottom: 1px dotted #bbbbbb; color: #444;}
.wiki h4 {margin-left: 45px; border-bottom: 1px dotted #bbbbbb; color: #444;}
.wiki h5 {margin-left: 60px; border-bottom: 1px dotted #bbbbbb; color: #444;}
.wiki h6 {margin-left: 75px; border-bottom: 1px dotted #bbbbbb; color: #444;}
.wiki h2 + p {margin-left: 15px;}
.wiki h3 + p {margin-left: 30px;}
.wiki h4 + p {margin-left: 45px;}
.wiki h5 + p {margin-left: 60px;}
.wiki h6 + p {margin-left: 75px;}
Though, this change also modifies some other un-desired parts of the UI due to some unwanted triggers on these selectors. This should be definately tweaked to get ready for implementation (I just post what I've got so far to prevent it from being erased in my head :).
Updated by Paul Rivier over 15 years ago
If you ask me, I'd say I really don't want the style you described. Tree-like indentation is helpful for discussion threads and many other uses, but I do not think it should be used for wiki page content :)
Updated by Mischa The Evil over 15 years ago
Paul Rivier wrote:
If you ask me, I'd say I really don't want the style you described. Tree-like indentation is helpful for discussion threads and many other uses, but I do not think it should be used for wiki page content :)
I'm a heavy user of DokuWiki which incorporates this feature. I personally like it and think the readability get improved as such. Though I understand this is an opinion that can vary among people...
Maybe if the selectors are precise enough this could be implemented (and supported) as a variation of the default-theme, as an independent theme. I've been looking at something earlier for issuelist colouring only (thus not duplicating the alternate-theme).
Kind regards,
Mischa.
Updated by Friedrich Schiller over 10 years ago
Mischa The Evil wrote:
Paul Rivier wrote:
If you ask me, I'd say I really don't want the style you described. Tree-like indentation is helpful for discussion threads and many other uses, but I do not think it should be used for wiki page content :)
I'm a heavy user of DokuWiki which incorporates this feature. I personally like it and think the readability get improved as such. Though I understand this is an opinion that can vary among people...
Maybe if the selectors are precise enough this could be implemented (and supported) as a variation of the default-theme, as an independent theme. I've been looking at something earlier for issuelist colouring only (thus not duplicating the alternate-theme).
Kind regards,
Mischa.
Hi there Mischa,
like you, I also want to indent the wiki-parts! It makes it much nicer, and easier to read!
Is there a good way of achieving this for the wiki?
Any suggestions are appreciated.
Thanks.
Fried.
Updated by Tiago Carvalho (LabOrders) almost 10 years ago
+1
Notice that one can create / edit a custom CSS file in /redmine/public/themes/"my_theme"/stylesheets/application.css
(http://www.redmine.org/projects/redmine/wiki/howto_create_a_custom_redmine_theme)
That is really easy and convenient (that's how we color-coded our trackers)
Now, the REAL problem is that wiki contents after each heading are CSS siblings and not children of the heading. Therefore the suggestion above will not work, eg:
.wiki h2 + p {margin-left: 15px;}
will indent ONLY the very next paragraph. If there is more than one it will not indent it. If there are tables, bullet lists, etc, will not indent those as well.
POSSIBLE SOLUTION:
After each heading include the following HTML:
<h1>This is heading 1</h1> <div class=h1_contents> ... </div> <h2>This is heading 2</h1> <div class=h2_contents> ... </div>
And then one would be able to style this HTML as suggested, using the custom CSS theme.
This is something I'd also be interested in.
Cheers,
Tiago