Enabling inline CSS styles

On this page

In GroupDocs.Editor, the editing operation implies that the source document is converted to the EditableDocument instance, and this instance can emit HTML- and CSS-markup to be placed in the client-side WYSIWYG-editor, then the end-user edits this document in the web-browser, and finally the document is saved — this implies converting document content from HTML/CSS back to the original (or some other) format.

By default the HTML-version of a document, which is obtained from the EditableDocument class, has its CSS styles placed in an external stylesheet file. The HTML file in this case contains a reference to the external stylesheet.

GroupDocs.Editor provides an ability to enable the “inline styles” mode for all documents which belong to the family of WordProcessing formats. In this mode only WordProcessing styles are exported to the external stylesheet, while all other styles — text and paragraph formatting, list and table settings — are exported directly to the HTML markup. They become inline CSS styles, which means that in this case the styles are saved in the “style” HTML attribute for every HTML element. As a result, an HTML document generated with the enabled inline styles option has larger HTML-markup and smaller CSS-markup, compared to one where this option is disabled.

The inline styles option is represented as a public boolean property in the WordProcessingEditOptions class. By default it is disabled (False).

from groupdocs.editor.options import WordProcessingEditOptions

edit_options = WordProcessingEditOptions()
edit_options.use_inline_styles = True

The example below shows opening and editing a single WordProcessing document twice: the first time in default style, and then with enabled inline styles.

import os
from groupdocs.editor import Editor, License
from groupdocs.editor.options import WordProcessingEditOptions

def use_inline_styles():
    # Optionally set a license
    license_path = os.path.abspath("./GroupDocs.Editor.lic")
    if os.path.exists(license_path):
        License().set_license(license_path)

    # Default edit options, where all styles are external
    options_external_styles = WordProcessingEditOptions()

    # Custom edit options, where most of the styles are inline
    options_inline_styles = WordProcessingEditOptions()
    options_inline_styles.use_inline_styles = True

    with Editor("./sample-document.docx") as editor:
        doc_external = editor.edit(options_external_styles)
        doc_inline = editor.edit(options_inline_styles)

        # Get only the HTML-markup for both variants
        html_external = doc_external.get_content()
        html_inline = doc_inline.get_content()

        print("External styles HTML length:", len(html_external))
        print("Inline styles HTML length:", len(html_inline))

        doc_external.dispose()
        doc_inline.dispose()

if __name__ == "__main__":
    use_inline_styles()

sample-document.docx is the sample file used in this example. Click here to download it.

External styles HTML length: 31654
Inline styles HTML length: 48162

Download full output

It is worth emphasizing that no matter where the CSS styles are located — inside the HTML-markup or in the external file — the final representation of the HTML-document in the web-browser will be identical.

Also please take into account that this feature exists only for the WordProcessing formats family.

On this page