Enabling inline CSS styles

In the 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 end-user edits this document in the web-browser, and finally document is saved — this implies converting document content from HTML/CSS back to the original (or some other) format.

Prior to the version 23.8 of the GroupDocs.Editor the HTML-version of a document, which is obtained from EditableDocument class, the CSS styles were placed in the external stylesheet file “style.css”. HTML file in this case contains a reference to the external stylesheet. And there was no possibility to change the location of CSS styles.

Version 23.8 of GroupDocs.Editor introduces a new option — an ability to enable the “inline styles” mode for all of the 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 became 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 enabled inline styles option, has larger HTML-markup and lesser CSS-markup, compared to the one, where this option is disabled.

The inline styles option is represented as a public property of the System.Boolean type in the WordProcessingEditOptions class. By default it is disabled (false), so the GroupDocs.Editor will act in the same behavior, as its previous versions.

public bool UseInlineStyles { get; set; }

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

// Obtain a valid full path to the existing WordProcessing file
string inputPath = "SampleDoc.docx";

// Create default edit options, where all styles are external
WordProcessingEditOptions editOptionsExternalStyles = new WordProcessingEditOptions();

//Create custom edit options, where most of styles are inline
WordProcessingEditOptions editOptionsInlineStyles = new WordProcessingEditOptions();
// Enable inline styles in this instance
editOptionsInlineStyles.UseInlineStyles = true;

// Create instance of the Editor class and load a document
using (Editor editor = new Editor(inputPath))
{
	// Get editable document instance, where all styles are external 
	EditableDocument docWithExternalStyles = editor.Edit(editOptionsExternalStyles);

	// Get editable document instance, where most of styles are inline
	EditableDocument docWithInlineStyles = editor.Edit(editOptionsInlineStyles);

	// Get only HTML-markup, where all styles are external
	string htmlMarkupExternal = docWithExternalStyles.GetContent();

	// Get only HTML-markup, where most of styles are inline
	string htmlMarkupInline = docWithInlineStyles.GetContent();

	// Make sure that HTML-markup with inline styles is bigger
	Assert.Greater(htmlMarkupInline.Length, htmlMarkupExternal.Length);
}

Need to emphasize 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.