Allow HTML5 articles and general inclusion of rich text in HTML in content rendering

[rtibbles]

What problem are we solving?

The current platform lacks the ability to properly render rich, interactive content within educational materials. Teachers need to display multimedia content (text, images, videos, interactive elements) in a cohesive, side-by-side format for students, but the current slideshow architecture is limited to basic images with captions, and relies on a bespoke and not well documented file format. This renderer component will serve as the foundation for displaying rich content created in the planned rich text editor, using HTML5 as the basis for the rich text documents.

Why this? Why now?

• The rendering component is a prerequisite for display of documents produced by rich text editing, both on Kolibri Studio and in the Kolibri Learning Platform
• The underlying HTML5 rendering will also be leveraged to display inlined HTML elements in QTI assessments
• Currently all rich text HTML5 content is rendered inside a sandboxed iframe, meaning that each document has to provide its own styling, rather than relying on platform provided styles, responsiveness, and accessibility
• Students need to be able to view rich content before they can author their own rich content as part of assignment submissions
• Building the renderer first allows us to establish the display standards before implementing the more complex editing functionality, which will help enforce other aspects, such as appropriate header levels, tab order, etc.

Outcomes

Specific needs that are being addressed, and how we will know when the project is done

• A rendering engine that can properly display HTML5 content including:
  • Formatted text (headings, paragraphs, lists, etc.)
  • Images with proper sizing and alignment
  • Tables
  • Captions
• Consistent rendering across web and mobile platforms
• Accessibility compliance with WCAG 2.1 AA standards
• Support for responsive layouts to accommodate different screen sizes

Constraints

Budgets, deadlines, technical limitations, and other constraints

• The renderer must sanitize HTML to prevent XSS attacks, CSS overrides, and any use of Javascript while preserving legitimate formatting
• Responsive display for mobile devices is crucial
• Content must be accessible according to WCAG 2.1 AA standards

Out of scope

• Content creation/editing functionality
• Content validation and correction tools