pyWebLayout/BROWSER_README.md

pyWebLayout HTML Browser

A simple HTML browser built using the pyWebLayout library components from pyWebLayout/io/ and pyWebLayout/concrete/.

Features

This browser demonstrates the capabilities of pyWebLayout by implementing:

Rendering Components

• Text rendering with various formatting (bold, italic, underline)
• Headers (H1-H6) with proper sizing and styling
• Links (clickable, with external browser opening for external URLs)
• Images (local files and web URLs with error handling)
• Layout containers for proper element positioning
• Basic HTML parsing and element conversion

User Interface

• Navigation controls: Back, Forward, Refresh buttons
• Address bar: Enter URLs or file paths
• File browser: Open local HTML files
• Scrollable content area with both vertical and horizontal scrollbars
• Mouse interaction: Clickable links with hover effects
• Status bar: Shows current operation status

Usage

Starting the Browser

python html_browser.py

Loading Content

1. Load the test page: The browser starts with a welcome page showing various features
2. Open local files: Click "Open File" to browse and select HTML files
3. Enter URLs: Type URLs in the address bar and press Enter or click "Go"
4. Navigate: Use back/forward buttons to navigate through history

Test Files

• test_page.html - A comprehensive test page demonstrating all supported features including:
  • Text formatting (bold, italic, underline)
  • Headers of all levels (H1-H6)
  • Links (both internal and external)
  • Images (includes the sample image from tests/data/)
  • Line breaks and paragraphs

Architecture

HTML Parser (HTMLParser class)

• Simple regex-based HTML tokenizer
• Converts HTML elements to pyWebLayout abstract objects
• Handles font styling with a font stack for nested formatting
• Supports basic HTML tags: h1-h6, b, strong, i, em, u, a, img, br, p, div, span

Browser Window (BrowserWindow class)

• Tkinter-based GUI with navigation controls
• Canvas-based rendering of pyWebLayout Page objects
• Mouse event handling for interactive elements
• Navigation history management
• File and URL loading capabilities

pyWebLayout Integration

The browser uses these pyWebLayout components:

From pyWebLayout/concrete/:

• Page - Top-level container for web page content
• Container - Layout management for multiple elements
• Box - Basic rectangular container with positioning
• Text - Text rendering with font styling
• RenderableImage - Image loading and display with scaling
• RenderableLink - Interactive link elements
• RenderableButton - Interactive button elements

From pyWebLayout/abstract/:

• Link - Abstract link representation with types (internal, external, API, function)
• Image - Abstract image representation with dimensions and loading
• Font and styling classes for text appearance

From pyWebLayout/style/:

• Font - Font management with size, weight, style, and decoration
• FontWeight, FontStyle, TextDecoration - Typography enums
• Alignment - Layout positioning options

Supported HTML Features

Text Elements

• <h1> to <h6> - Headers with appropriate sizing
• <p> - Paragraphs with spacing
• <b>, <strong> - Bold text
• <i>, <em> - Italic text
• <u> - Underlined text
• <br> - Line breaks

Interactive Elements

• <a href="..."> - Links (opens external URLs in system browser)

Media Elements

• <img src="..." alt="..." width="..." height="..."> - Images with scaling

Container Elements

• <div>, <span> - Generic containers (parsed but not specially styled)

Example Usage

# Start the browser
from html_browser import BrowserWindow

browser = BrowserWindow()
browser.run()

Limitations

This is a demonstration browser with simplified HTML parsing:

• No CSS support (styling is done through pyWebLayout components)
• No JavaScript execution
• Limited HTML tag support
• No form submission (forms can be rendered but not submitted)
• No advanced layout features (flexbox, grid, etc.)

Dependencies

• tkinter - GUI framework (usually included with Python)
• PIL (Pillow) - Image processing
• requests - HTTP requests for web URLs
• pyWebLayout - The core layout and rendering library

Testing

Load test_page.html to see all supported features in action:

1. Run the browser: python html_browser.py
2. Click "Open File" and select test_page.html
3. Explore the different text formatting, links, and image rendering

The test page includes:

• Various header levels
• Text formatting examples
• Clickable links (try the Google link!)
• A sample image from the test data
• Mixed content demonstrations