Html element which ignores all parent css

Question

Im embeding a word document saved as html in my site, but there are conflicts between the generated css and my site’s. What could really help me is having a “scoped” element, which is not effecting or being effected by the site itself. Is there any solution to this problem? Thanks

You could embed the word based html and its css in an iframe. — Bulent Vural, Aug 19 '18 at 12:06
But an iframe is not very responsive - i might want to develop features which include access to the document from the outer site. All i need is the “scoped css” functionality — user69153, Aug 20 '18 at 09:28

score 0 · Answer 1 · answered Aug 19 '18 at 15:51

0

I personally use classes as wrappers for scoping. Below all of the styles from the word document will be "scoped" to the beginning and ending of the span tag.

/*some css wrapper class*/
.word-document-wrapper
{

}

<span class="word-document-wrapper>

  <!--word document here-->

</span>

answered Aug 19 '18 at 15:51

Zechariah McPherson

11
1

But how do u handle outer css effects on the document? – user69153 Aug 20 '18 at 10:52

score 0 · Answer 2 · answered Aug 20 '18 at 04:49

0

You can use HtmlSaveOptions class to specify additional options when saving a Word document into the Html, Mhtml or Epub format. For example:

Document doc = new Document("D:\\Temp\\input.docx");

HtmlSaveOptions opts = new HtmlSaveOptions(SaveFormat.Html);
opts.CssStyleSheetType = CssStyleSheetType.Embedded;
opts.ExportImagesAsBase64 = true;
opts.ExportFontsAsBase64 = true;
opts.PrettyFormat = true;

doc.Save("D:\\temp\\18.8.html", opts);

I work with Aspose as Developer Evangelist.

answered Aug 20 '18 at 04:49

Awais Hafeez

1,070
5
9

That will work on the inside css not affecting the rest of the document, but what about the other way around? Lets say i have a css rule that makes all divs rtl, which is ok for my site but problematic for the embeded document – user69153 Aug 20 '18 at 09:29
We are checking this scenario and will get back to you soon. – Awais Hafeez Aug 21 '18 at 01:03
As far as I know, the only way to isolate CSS styles of a HTML element from styles of the containing document is to manually reset all unwanted CSS styles on the element. Please check [How To Isolate a div from public CSS styles?](https://stackoverflow.com/questions/10064172/how-to-isolate-a-div-from-public-css-styles) – Awais Hafeez Aug 21 '18 at 06:17

Html element which ignores all parent css

2 Answers2