Export Styles During Document Editing Leave feedback

The family of WordProcessing formats, commonly represented by the Office Open XML formats and Open Document Format (ODT), have a concept of styles. In this context, a style is a defined set of formatting options that can be applied to spans of text, paragraphs, lists, or tables. Styles can be built-in (defined by the word processor program, such as MS Word) or user-defined. Each style has a unique name and can be derived from another style. In MS Word, styles are usually located in the “Styles” area on the “Home” tab; users can select desired text or paragraphs and then click on the preferred style to apply the style formatting.

Every style has the following characteristics and parameters:

1. Unique Name: Each style has a unique identifier.
2. Style Type: It can be a character style (applied to text within a paragraph), a paragraph style (applied to paragraph(s)), a list style (applied to list items), or a table style (applied to the entire table).
3. Origin: It can be either built-in in MS Word or user-defined.
   • Built-in Styles Only: It can be a heading style or not.
4. Quick Style: It can be a Quick Style or not; if it is, the style is shown in the Quick Style gallery inside the MS Word UI.
5. Based On: It may be based on another style or not.

Before version 24.4, GroupDocs.Editor did not support styles: they were neither exported to the HTML/CSS markup during editing nor imported back during saving. There was no possibility for the end-user to determine how specific text or paragraphs were originally formatted—whether they were formatted using custom formatting or styles.

Starting from version 24.4, GroupDocs.Editor finally supports styles on export. This feature is always enabled and modifies the way HTML markup and CSS stylesheets are generated. GroupDocs.Editor exports WordProcessing styles by transforming them into CSS rulesets and referencing these rulesets from the HTML markup.

Here is an example of CSS markup that contains an 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 store the style’s parameters:

• First Class Selector: A unique style name, adjusted to meet the CSS identifier requirements.
• Second Class Selector: Indicates whether it is a Quick Style.
• Third Class Selector: Indicates whether it is a built-in style or user-defined.
• Fourth Class Selector: Indicates whether it is a built-in heading style.
• Fifth Class Selector: Defines the style type: Character, Paragraph, List, or Table.

Here is an example of CSS markup that contains a custom user-defined character style named “Subheading Char”:

.Subheading_Char, .User-style, .Character-style { 
    -gd-style-name: 'Subheading Char'; 
    font-family: Cambria; 
    font-size: 12pt; 
    font-weight: normal; 
    font-style: italic; 
    color: rgb(79, 129, 189); 
    letter-spacing: 0.75pt; 
}

Despite this new feature modifying the HTML and CSS markup, it was developed to not disturb or distort the representation of the document in the browser. When opening and comparing two edited documents side-by-side—one generated by the previous version 23.9 and the other by version 24.4—there will be no visual difference in the browser.

• Always Enabled: This feature is not an option; it is always turned on starting from version 24.4.
• No Visual Differences: The changes in the HTML and CSS markup do not affect the visual representation of the document in web browsers.
• Future Improvements: In the next version of GroupDocs.Editor, we plan to implement the import of styles back when saving previously opened and edited documents to the WordProcessing format.

When you edit a WordProcessing document using GroupDocs.Editor for Node.js via Java, the styles are automatically preserved and exported into the HTML and CSS. Here’s how you can edit a document:

// Import necessary modules
const groupdocs_editor = require('groupdocs-editor');
const fs = require('fs');

// Load the source WordProcessing document
const editor = new groupdocs_editor.Editor('SampleDocument.docx');

// Create WordProcessingEditOptions if needed
const editOptions = new groupdocs_editor.WordProcessingEditOptions();

// Edit the document to get an EditableDocument instance
const editableDocument = editor.edit(editOptions);

// Get the HTML content and resources
const htmlContent = editableDocument.getContent();
const allResources = editableDocument.getEmbeddedHtmlResources();

// Save the HTML content and CSS stylesheet
fs.writeFileSync('EditedDocument.html', htmlContent);

// Save the CSS stylesheet if it's not embedded
if (editableDocument.hasExternalCssContent()) {
    const cssContent = editableDocument.getExternalCssContent();
    fs.writeFileSync('styles.css', cssContent);
}

// Optionally, save other resources like images
// ... (handling other resources)

// After editing, you can save the document back to WordProcessing format
const saveOptions = new groupdocs_editor.WordProcessingSaveOptions(groupdocs_editor.WordProcessingFormats.Docx);

// Save the edited document
editor.save(editableDocument, 'EditedDocument.docx', saveOptions);

console.log('Document edited and saved successfully.');

Note:

• Replace 'SampleDocument.docx' with the path to your WordProcessing document.
• The styles from the original document are preserved and exported into the HTML and CSS automatically.

The support for exporting styles during document editing enhances the capability of GroupDocs.Editor for Node.js via Java to handle complex WordProcessing documents. It ensures that all built-in and custom styles are preserved during the editing process, providing a more accurate representation of the original document in HTML/CSS format.

This feature is particularly useful for developers who need to maintain the styling and formatting consistency of documents when converting them to HTML for editing and then back to WordProcessing formats.

For more examples and detailed information, you can refer to the GroupDocs.Editor for Node.js via Java Examples repository on GitHub.