Defect #4544

Wiki exported HTML has different CSS formatting to the original

Added by Brad Rushworth over 10 years ago. Updated over 4 years ago.

Status:NewStart date:2010-01-10
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:Wiki
Target version:-
Resolution: Affected version:

Description

Following on from #4194, I've noticed other formatting on the "Export to HTML" feature of wiki pages to be no working.

Examples are:
  • HTML table borders
  • quoted indenting
  • source code quoting
  • inline images
  • etc

See for yourself:

http://www.redmine.org/wiki/redmine/FAQ
http://www.redmine.org/wiki/redmine/FAQ?format=html&version=54

http://www.redmine.org/wiki/redmine/Features
http://www.redmine.org/wiki/redmine/Features?format=html&version=15

Is there a way to ensure that the exported HTML has the same CSS formatting as the original?

History

#1 Updated by Alex Petrof over 9 years ago

  • Assignee set to Jean-Philippe Lang

Hello,

is there in the meantime any solution for this issue?

Thanks!
Best Regards
Alex Petrof

#2 Updated by Alex Petrof over 9 years ago

  • Assignee changed from Jean-Philippe Lang to Azamat Hackimov

Please, hasn't anyone something to say about this case. It's quite a big problem and we are running out of options!

#3 Updated by Etienne Massip over 9 years ago

Exported HTML is not supposed to be the same as the original.

If you need the original format, simply use "Save as..." ?

#4 Updated by Alex Petrof over 9 years ago

Yes it would be the prefect idea, if I didn't have to write some kind of parser which strips out all frames and stuff I don't actually need just in order to get to the plain wiki page, which is actually exactly what the html-exporter function does. Of course without the formatting, table borders etc. Isn't there some kind of option which I could hardcode in some ruby file in order to "fix" this? I tried some stuff in redmine/app/controllers/wiki_controller.rb but neither seemed to work. The problem is I am not into ruby. For now...

And anyway what's the point of having a nice table in your wiki, which when exported ends up without a single border, only words and values floating on the white sheet? Excuse me but I fail to see the point. If I needed that, I'd use the text export function anyway!

Any help would be appreciated!

#5 Updated by Alex Petrof over 9 years ago

I find it really lovely, that the so called community is so "eager" to help.
So the amateur as I am, I found some kind of solution myself, thanks to the helpful note of Herve Morillon (which was also left unanswered almost 3 years ago) here:
http://www.redmine.org/boards/2/topics/389

I will describe it here, in case somebody else stumbles upon that problem.

So you have to copy the parts regarding the Wiki from the /redmine/public/stylesheets/application.css in to /redmine/app/views/wiki/export.rhtml while removing the "div.wiki" clause from every statement. The part to copy (in the <style> clause) is the following:

table {
    border: 1px solid #505050;
    border-collapse: collapse;
    margin-bottom: 1em;
}
table, td, th {
    border: 1px solid #bbb;
    padding: 4px;
}
.external {
    background-position: 0% 60%;
    background-repeat: no-repeat;
    padding-left: 12px;
    background-image: url(../images/external.png);
}

a.new {
    color: #0C00AE;
}

pre {
    margin: 1em 1em 1em 1.6em;
    padding: 2px 2px 2px 0;
    background-color: #fafafa;
    border: 1px solid #dadada;
    width:auto;
    overflow-x: auto;
    overflow-y: hidden;
}

ul.toc {
    background-color: #ffffdd;
    border: 1px solid #e4e4e4;
    padding: 4px;
    line-height: 1.2em;
    margin-bottom: 12px;
    margin-right: 12px;
    margin-left: 0;
    display: table
}
* html ul.toc { width: 50%; } /* IE6 doesn't autosize div */
ul.toc.right { float: right; margin-left: 12px; margin-right: 0; width: auto; }
ul.toc.left  { float: left; margin-right: 12px; margin-left: 0; width: auto; }
ul.toc li { list-style-type:none;}
ul.toc li.heading2 { margin-left: 6px; }
ul.toc li.heading3 { margin-left: 12px; font-size: 0.8em; }

ul.toc a {
    font-size: 0.9em;
    font-weight: normal;
    text-decoration: none;
    color: #606060;
}
ul.toc a:hover { color: #c61a1a; text-decoration: underline;}

a.wiki-anchor { display: none; margin-left: 6px; text-decoration: none; }
a.wiki-anchor:hover { color: #aaa !important; text-decoration: none; }
h1:hover a.wiki-anchor, h2:hover a.wiki-anchor, h3:hover a.wiki-anchor { display: inline; color: #ddd; }

img { vertical-align: middle; }

This approach brings the html formatting back to the exported html files, so they look similar to the original one in the wiki. This includes table having borders, table of contents, code snippets (although I could not get the highlighting to work), inline images etc.

At the end you have to restart redmine (i.e. ctlscript.sh restart)

#6 Updated by Azamat Hackimov over 9 years ago

  • Assignee deleted (Azamat Hackimov)

#7 Updated by Etienne Massip over 9 years ago

Syntax highlighting would require that you copy the scm.css file contents.

I guess there could be some improvements to the HTML export feature, especially with tables, thanks for sharing your changes.

And please don't spit on the "community", we're just trying to help as much as we can for free, and we don't have a lot of time to share (we work too).

#8 Updated by Alex Petrof over 9 years ago

Syntax highlighting would require that you copy the scm.css file contents.

Thank you very much for the contribution to my solution. But that's exactly my point. A single liner from someone with the experience would have saved me at least 2 hours of googling and frustrated trial and errors experimenting with some ruby code I don't have a clue of.

#9 Updated by Yuriy Vidineev almost 9 years ago

I also have issue with table border in HTML export. It is possible to enable Alex Petrof solution in Redmine out of box?

#10 Updated by Torsten Martinsen over 4 years ago

The solution in #4544-5 works even better if you add

body { font:80% Verdana,Tahoma,Arial,sans-serif; }

Also available in: Atom PDF