Defect #4544
openWiki exported HTML has different CSS formatting to the original
0%
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?
Updated by Alex Petrof almost 14 years ago
- Assignee set to Jean-Philippe Lang
Hello,
is there in the meantime any solution for this issue?
Thanks!
Best Regards
Alex Petrof
Updated by Alex Petrof almost 14 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!
Updated by Etienne Massip almost 14 years ago
Exported HTML is not supposed to be the same as the original.
If you need the original format, simply use "Save as..." ?
Updated by Alex Petrof almost 14 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!
Updated by Alex Petrof over 13 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
)
Updated by Etienne Massip over 13 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).
Updated by Alex Petrof over 13 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.
Updated by Yuriy Vidineev about 13 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?
Updated by Torsten Martinsen over 8 years ago
The solution in #4544-5 works even better if you add
body { font:80% Verdana,Tahoma,Arial,sans-serif; }