1

My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.

I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border style issues to resolve.

I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?

Jim Norman
  • 791
  • 7
  • 27
  • Why not open a new window with there document in there? As far as I'm concerned when/if you bring in a second style sheet, it will cascade all of the styles to the second one referenced, no matter what. – Jacob Nelson May 12 '11 at 18:16
  • @peteorpeter Yes, that is an option. – Jim Norman May 12 '11 at 19:47
  • @Jacob The document needs to be embedded in our site's context. Your suggestion is worth second consideration on our part, however. – Jim Norman May 12 '11 at 19:49
  • @Jacob, using an iFrame will prevent the styles from cascading into the iframe: http://jsfiddle.net/xixionia/MC88h/ – cwharris May 12 '11 at 20:46

2 Answers2

1

You have two options:

1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.

2.) Use an iframe and load the document and styles inside the iframe.

<iframe src=".../documents/myDocument.html"></iframe>

Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.

Other options:

1.) Open the document html page inside another window.

<a href=".../document/myDocument.html" target="_blank" >Open Document</a>

2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).

cwharris
  • 16,958
  • 4
  • 42
  • 62
  • And if you have any questions regarding to styling an iFrame, or the contents of an iFrame, I would look here: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Jacob Nelson May 12 '11 at 18:19
  • +1 for iFrames. This is a surefire way to prevent CSS conflicts, whereas a reset will depend on how everything cascades and is likely error prone. – peteorpeter May 12 '11 at 20:31
  • I haven't tried it yet, but this SO entry seems to round out my requirements: http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content – Jim Norman May 12 '11 at 20:38
  • So then, does the same-origin policy apply to you? Are you doing cross-domain document referencing? From your original description, you mentioned nothing about this, and the referenced SO says nothing about styling (other than height). – cwharris May 12 '11 at 20:44
  • I may have jumped the gun with the above link. I haven't had time to evaluate it fully, but upon first glance it looks like it addresses in some way my need to display the entire document -- no scroll bars. – Jim Norman May 13 '11 at 04:01
0

Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.

Otherwise, I would suggest using something like an iframe where you can render a truly independent document.

Jage
  • 7,714
  • 3
  • 29
  • 30