index.less

Overview

The index.less file defines the styling rules for rendering .docx document views within the PlanGrid application. Its primary role is to provide consistent and visually coherent CSS styles, specifically tailored to display Microsoft Word (.docx) documents in a web environment while maintaining readability, formatting, and layout fidelity.

This stylesheet includes:

• Container styling for the .docxViewerWrapper component.

• Global styles for document content elements such as headings, paragraphs, tables, lists, and inline elements.

• Bidirectionality support for left-to-right and right-to-left text directions.

• Print media queries to improve document print layouts.

The file leverages nested rules and global overrides to isolate document styling within the viewer component while ensuring the document content respects standard HTML semantics.

Detailed Explanation

Top-level Container: .docxViewerWrapper

• Purpose: Acts as the viewport for the embedded document viewer.

• Styles:

  • overflow-y: scroll; — Enables vertical scrolling for overflow content.

  • height: 100%; width: 100%; — Occupies full available container space.

• Nested .box class:

  • Sets width and height to 100% to fill the .docxViewerWrapper.

Global Document Container Override: :global(.document-container)

• Purpose: Applies padding, fixed width, background transparency, and centering to the document content container.

• Styles:

  • padding: 30px;

  • width: 700px; — Fixed width for consistent layout.

  • background: rgba(255, 255, 255, 0.1); — Slightly translucent white background.

  • margin: auto; — Centers the container horizontally.

HTML Element Display and Typography Resets

The file sets display properties and typographic defaults for many HTML elements to ensure the document content renders uniformly and predictably:

• Block elements (html, body, div, p, h1...h6, blockquote, form, ol, ul, etc.) are explicitly set to display: block with unicode-bidi: embed to control text direction embedding.

• List items (li) are styled as list-item with disc bullets.

• Table elements (table, tr, thead, tbody, tfoot, col, colgroup, th, td, caption) have their display set to appropriate table display types, ensuring proper table layout.

• Images (img) are set to width: 100% for responsiveness within their container.

• Table cells (td) have borders and padding for visual clarity.

• Headings (h1 to h6) have font sizes and margins adjusted to mimic typical document heading hierarchies.

• Inline text elements such as i, em, cite, var, and address are italicized.

• Monospace font is applied to code-related elements (pre, tt, code, etc.).

• Form controls (button, textarea, input, select) use inline-block display.

• Text decorations such as underline and strike-through are applied to relevant tags (u, ins, s, strike, del).

• Special care for bidirectionality is included with CSS rules targeting elements with DIR='ltr' and DIR='rtl' attributes to ensure correct text direction and Unicode bidi behavior.

Print Media Query

• Ensures proper page breaks when printing the document:

  • Headings (h1) trigger page breaks before.

  • Headings (h1 to h6) avoid page breaks after.

  • Lists (ul, ol, dl) avoid page breaks before.

Implementation Details and Algorithms

• The file uses LESS syntax, allowing nested selectors like .docxViewerWrapper { .box { ... } }.

• The use of :global() pseudo selector indicates integration with CSS Modules or scoped CSS, ensuring .document-container styles apply globally within the viewer.

• Bidirectionality styles are carefully implemented using [DIR='ltr'] and [DIR='rtl'] attribute selectors combined with unicode-bidi properties to support multilingual content.

• The CSS resets and explicit display types help normalize cross-browser inconsistencies in default element rendering, particularly important for complex document structures.

• Table styling includes borders on td elements to visually recreate table grids within rendered documents.

• The print media query enhances user experience when printing documents by controlling page breaks to avoid awkward splits.

Interaction With the System

• This stylesheet is applied within the .docxViewerWrapper React (or similar framework) component or equivalent container responsible for embedding and rendering .docx files converted to HTML.

• It styles content inside .document-container, which likely holds the parsed HTML version of .docx files.

• The styles ensure that Word document elements maintain their formatting and structure when displayed inside the PlanGrid platform.

• It complements JavaScript logic and React components responsible for loading, parsing, and rendering document contents, but does not contain any logic itself.

• By isolating styles within .docxViewerWrapper and using :global for document content, it prevents style leakage and conflicts with the rest of the application.

Usage Example

A typical usage would be:

<div className="docxViewerWrapper">
  <div className="box">
    <div className="document-container">
      {/* Parsed .docx content as HTML here */}
    </div>
  </div>
</div>

The index.less provides styles that ensure this content is scrollable, sized correctly, and displays the document content with fidelity.

Visual Diagram

flowchart TD
    A[.docxViewerWrapper]
    A --> B[.box]
    B --> C[:global(.document-container)]
    C --> D[HTML Document Elements]
    D -->|styled| E[Headings (h1-h6)]
    D -->|styled| F[Paragraphs, Blockquotes, Lists]
    D -->|styled| G[Tables (table, tr, td, th)]
    D -->|styled| H[Inline Elements (i, em, cite, code)]
    D -->|styled| I[Form Controls (button, input, select)]
    A --> J[Scrollbar (overflow-y: scroll)]
    C --> K[Bidirectionality Styles (DIR=ltr/rtl)]
    C --> L[Print Media Query]

Summary

The index.less file is a highly specialized style sheet designed to render .docx document content within a web-based viewer. It provides detailed CSS resets and formatting rules to preserve document structure, typography, and layout. It supports bidirectional text, responsive images, and print-friendly formatting. This file integrates tightly with the document viewer UI component, ensuring consistent user experience across document types and languages.