Export styles during document editing

The family of WordProcessing formats, commonly represented by the Office Open XML formats and Open Document Format (ODT) formats, have a concept of styles. Here the style is a defined set of formatting options, which can be applied to some span of text, paragraphs, lists, or tables. Styles can be built-in (defined by the word processor program, MS Word, for example), or user-defined. Every style has a unique name and can be derived from another style. In MS Word styles are usually located in the “Styles” area in the “Main” tab; users can select a desired text or paragraph of the document and then click on the preferred style in order to apply the style formatting.

Every style has the next characteristics and parameters:

  1. It has a unique name.
  2. It can be a character style (applied for textual content within paragraph), a paragraph style (applied to paragraph(s)), a list style (applied for list items), and a table style (applied to the whole table).
  3. It can be either built-in in MS Word or user-defined.
    • For the built-in styles only: it can be heading style or not.
  4. It can be a Quick Style or not; if yes, this style is shown in the Quick Style gallery inside MS Word UI.
  5. It may be based on some other style or not.

Before the version 23.8 the GroupDocs.Editor had no support of styles: they were not exported to the HTML/CSS markup during editing the document and not imported back during saving the document, and there were no possibility for the end-user to determine how the specific text or paragraph was originally formatted: whether it was formatted by using a custom formatting or using the styles.

Starting from the version 23.8 the GroupDocs.Editor finally supports styles on export. This feature is not an option, it is always turned on and starting from the version 23.8 the HTML markup and CSS stylesheet is generated differently. GroupDocs.Editor exports the WordProcessing styles by transforming them onto the CSS rulesets and referencing these rulesets from the HTML markup.

Here is an example of CSS markup, which contains a MS Word built-in style named “Heading 1”:

.Heading_1, .Quick-style, .BuiltIn-style, .Heading-style, .Paragraph-style { 
	-aw-style-name: heading1; 
	-gd-style-name: 'Heading 1'; 
	font-family: Cambria; 
	font-size: 14pt; 
	font-weight: bold; 
	font-style: normal; 
	color: rgb(54, 95, 145); 
	text-align: left; 
	margin-top: 24pt; 
	margin-bottom: 0pt; 
	line-height: 134.16667%; 

The original style name is preserved in the custom property “-gd-style-name”. Because it is a built-in style, it also has a style identifier in the custom property “-aw-style-name”. The class selectors inside the grouped selector of this ruleset also stores the style’s parameters:

  • First class selector is a unique style name, adjusted to meet the “CSS identifier” requirements.
  • Second class selector shows whether it is a quick style.
  • Third class selector shows whether it is a built-in style or user style.
  • Fourth class selector shows whether it is a built-in heading style.
  • Fifth style selector defines the style type: Character, Paragraph, List, or Table.

Here is an example of CSS markup, which contains a custom user-defined character style named “Подзаголовок Знак”:

.Подзаголовок_Знак, .User-style, .Character-style { 
	-gd-style-name: 'Подзаголовок Знак'; 
	font-family: Cambria; 
	font-size: 12pt; 
	font-weight: normal; 
	font-style: italic; 
	color: rgb(79, 129, 189); 
	letter-spacing: 0.75pt; 

Despite that with this new feature the HTML markup has modified slightly, and CSS markup has modified drastically, the feature was developed in such a way to not disturb or distort the representation of the document in the browser. So when opening and comparing in the web-browser the two edited documents side-by-side, where the left one is generated by the previous version 23.5, and the right is generated by the version 23.8, there will be no visual difference.

In the next version of the GroupDocs.Editor we plan to implement an import of styles back when saving previously opened and edited documents back to the WordProcessing format.