Project

General

Profile

Actions

Defect #4544

open

Wiki exported HTML has different CSS formatting to the original

Added by Brad Rushworth over 14 years ago. Updated about 8 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
Wiki
Target version:
-
Start date:
2010-01-10
Due date:
% Done:

0%

Estimated time:
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?

Actions #1

Updated by Alex Petrof over 13 years ago

  • Assignee set to Jean-Philippe Lang

Hello,

is there in the meantime any solution for this issue?

Thanks!
Best Regards
Alex Petrof

Actions #2

Updated by Alex Petrof about 13 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!

Actions #3

Updated by Etienne Massip about 13 years ago

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

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

Actions #4

Updated by Alex Petrof about 13 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!

Actions #5

Updated by Alex Petrof about 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)

Actions #6

Updated by Azamat Hackimov about 13 years ago

  • Assignee deleted (Azamat Hackimov)
Actions #7

Updated by Etienne Massip about 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).

Actions #8

Updated by Alex Petrof about 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.

Actions #9

Updated by Yuriy Vidineev over 12 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?

Actions #10

Updated by Torsten Martinsen about 8 years ago

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

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

Actions

Also available in: Atom PDF