html2pic 0.2.1__tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. html2pic-0.2.1/.gitignore +145 -0
  2. html2pic-0.2.1/CHANGELOG.md +204 -0
  3. html2pic-0.2.1/PKG-INFO +367 -0
  4. html2pic-0.2.1/README.md +334 -0
  5. html2pic-0.2.1/examples/01_quick_start.py +54 -0
  6. html2pic-0.2.1/examples/01_quick_start_output.png +0 -0
  7. html2pic-0.2.1/examples/02_flexbox_card.py +63 -0
  8. html2pic-0.2.1/examples/02_flexbox_card_output.png +0 -0
  9. html2pic-0.2.1/examples/03_typography_showcase.py +57 -0
  10. html2pic-0.2.1/examples/03_typography_showcase_output.png +0 -0
  11. html2pic-0.2.1/examples/04_shadows_and_effects.py +85 -0
  12. html2pic-0.2.1/examples/04_shadows_and_effects_output.png +0 -0
  13. html2pic-0.2.1/examples/05_background_images.py +86 -0
  14. html2pic-0.2.1/examples/05_background_images_output.png +0 -0
  15. html2pic-0.2.1/examples/README.md +76 -0
  16. html2pic-0.2.1/examples/advanced_styling_example.png +0 -0
  17. html2pic-0.2.1/examples/background.webp +0 -0
  18. html2pic-0.2.1/examples/border_radius_example.png +0 -0
  19. html2pic-0.2.1/pyproject.toml +74 -0
  20. html2pic-0.2.1/src/html2pic/__init__.py +18 -0
  21. html2pic-0.2.1/src/html2pic/dom/__init__.py +5 -0
  22. html2pic-0.2.1/src/html2pic/dom/dom_node.py +44 -0
  23. html2pic-0.2.1/src/html2pic/dom/node_type.py +7 -0
  24. html2pic-0.2.1/src/html2pic/exceptions.py +16 -0
  25. html2pic-0.2.1/src/html2pic/fonts/__init__.py +6 -0
  26. html2pic-0.2.1/src/html2pic/fonts/font_face.py +19 -0
  27. html2pic-0.2.1/src/html2pic/fonts/font_registry.py +48 -0
  28. html2pic-0.2.1/src/html2pic/fonts/font_src_parser.py +48 -0
  29. html2pic-0.2.1/src/html2pic/html2pic.py +123 -0
  30. html2pic-0.2.1/src/html2pic/parsing/__init__.py +15 -0
  31. html2pic-0.2.1/src/html2pic/parsing/css_parser.py +176 -0
  32. html2pic-0.2.1/src/html2pic/parsing/css_rule.py +12 -0
  33. html2pic-0.2.1/src/html2pic/parsing/html_parser.py +76 -0
  34. html2pic-0.2.1/src/html2pic/parsing/selector.py +31 -0
  35. html2pic-0.2.1/src/html2pic/parsing/shorthand_expander.py +78 -0
  36. html2pic-0.2.1/src/html2pic/styling/__init__.py +14 -0
  37. html2pic-0.2.1/src/html2pic/styling/cascade_resolver.py +57 -0
  38. html2pic-0.2.1/src/html2pic/styling/color_normalizer.py +66 -0
  39. html2pic-0.2.1/src/html2pic/styling/default_styles.py +73 -0
  40. html2pic-0.2.1/src/html2pic/styling/style_engine.py +111 -0
  41. html2pic-0.2.1/src/html2pic/styling/unit_converter.py +61 -0
  42. html2pic-0.2.1/src/html2pic/translation/__init__.py +6 -0
  43. html2pic-0.2.1/src/html2pic/translation/element_factory.py +59 -0
  44. html2pic-0.2.1/src/html2pic/translation/shadow_parser.py +130 -0
  45. html2pic-0.2.1/src/html2pic/translation/style_applicators/__init__.py +24 -0
  46. html2pic-0.2.1/src/html2pic/translation/style_applicators/background_applicator.py +156 -0
  47. html2pic-0.2.1/src/html2pic/translation/style_applicators/base_applicator.py +14 -0
  48. html2pic-0.2.1/src/html2pic/translation/style_applicators/border_applicator.py +68 -0
  49. html2pic-0.2.1/src/html2pic/translation/style_applicators/layout_applicator.py +68 -0
  50. html2pic-0.2.1/src/html2pic/translation/style_applicators/positioning_applicator.py +86 -0
  51. html2pic-0.2.1/src/html2pic/translation/style_applicators/shadow_applicator.py +26 -0
  52. html2pic-0.2.1/src/html2pic/translation/style_applicators/size_applicator.py +123 -0
  53. html2pic-0.2.1/src/html2pic/translation/style_applicators/spacing_applicator.py +50 -0
  54. html2pic-0.2.1/src/html2pic/translation/style_applicators/transform_applicator.py +128 -0
  55. html2pic-0.2.1/src/html2pic/translation/style_applicators/typography_applicator.py +129 -0
  56. html2pic-0.2.1/src/html2pic/translation/translator.py +126 -0
  57. html2pic-0.2.1/src/html2pic/translation/value_parsers.py +61 -0
  58. html2pic-0.2.1/src/html2pic/warnings/__init__.py +5 -0
  59. html2pic-0.2.1/src/html2pic/warnings/warning_category.py +13 -0
  60. html2pic-0.2.1/src/html2pic/warnings/warning_collector.py +169 -0
@@ -0,0 +1,145 @@
1
+ # Byte-compiled / optimized / DLL files
2
+ __pycache__/
3
+ *.py[cod]
4
+ *$py.class
5
+
6
+ # C extensions
7
+ *.so
8
+
9
+ # Distribution / packaging
10
+ .Python
11
+ build/
12
+ develop-eggs/
13
+ dist/
14
+ downloads/
15
+ eggs/
16
+ .eggs/
17
+ lib/
18
+ lib64/
19
+ parts/
20
+ sdist/
21
+ var/
22
+ wheels/
23
+ pip-wheel-metadata/
24
+ share/python-wheels/
25
+ *.egg-info/
26
+ .installed.cfg
27
+ *.egg
28
+ MANIFEST
29
+
30
+ # PyInstaller
31
+ # Usually these files are written by a python script from a template
32
+ # before PyInstaller builds the exe, so as to inject date/other infos into it.
33
+ *.manifest
34
+ *.spec
35
+
36
+ # Installer logs
37
+ pip-log.txt
38
+ pip-delete-this-directory.txt
39
+
40
+ # Unit test / coverage reports
41
+ htmlcov/
42
+ .tox/
43
+ .nox/
44
+ .coverage
45
+ .coverage.*
46
+ .cache
47
+ nosetests.xml
48
+ coverage.xml
49
+ *.cover
50
+ *.py,cover
51
+ .hypothesis/
52
+ .pytest_cache/
53
+
54
+ # Translations
55
+ *.mo
56
+ *.pot
57
+
58
+ # Django stuff:
59
+ *.log
60
+ local_settings.py
61
+ db.sqlite3
62
+ db.sqlite3-journal
63
+
64
+ # Flask stuff:
65
+ instance/
66
+ .webassets-cache
67
+
68
+ # Scrapy stuff:
69
+ .scrapy
70
+
71
+ # Sphinx documentation
72
+ docs/_build/
73
+
74
+ # PyBuilder
75
+ target/
76
+
77
+ # Jupyter Notebook
78
+ .ipynb_checkpoints
79
+
80
+ # IPython
81
+ profile_default/
82
+ ipython_config.py
83
+
84
+ # pyenv
85
+ .python-version
86
+
87
+ # pipenv
88
+ # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
89
+ # However, in case of collaboration, if having platform-specific dependencies or dependencies
90
+ # having no cross-platform support, pipenv may install dependencies that don't work, or not
91
+ # install all needed dependencies.
92
+ #Pipfile.lock
93
+
94
+ # PEP 582; used by e.g. github.com/David-OConnor/pyflow
95
+ __pypackages__/
96
+
97
+ # Celery stuff
98
+ celerybeat-schedule
99
+ celerybeat.pid
100
+
101
+ # SageMath parsed files
102
+ *.sage.py
103
+
104
+ # Environments
105
+ .env
106
+ .venv
107
+ env/
108
+ venv/
109
+ ENV/
110
+ env.bak/
111
+ venv.bak/
112
+
113
+ # Spyder project settings
114
+ .spyderproject
115
+ .spyproject
116
+
117
+ # Rope project settings
118
+ .ropeproject
119
+
120
+ # mkdocs documentation
121
+ /site
122
+
123
+ # mypy
124
+ .mypy_cache/
125
+ .dmypy.json
126
+ dmypy.json
127
+
128
+ # Pyre type checker
129
+ .pyre/
130
+
131
+ # IDE files
132
+ .vscode/
133
+ .idea/
134
+ *.swp
135
+ *.swo
136
+ *~
137
+
138
+ # OS generated files
139
+ .DS_Store
140
+ .DS_Store?
141
+ ._*
142
+ .Spotlight-V100
143
+ .Trashes
144
+ ehthumbs.db
145
+ Thumbs.db
@@ -0,0 +1,204 @@
1
+ # Changelog
2
+
3
+ All notable changes to html2pic will be documented in this file.
4
+
5
+ ## [0.2.0] - 2026-01-10
6
+
7
+ ### ⚠️ BREAKING CHANGES
8
+
9
+ This release requires **PicTex 2.0** or higher. The underlying layout engine has been migrated to use Taffy (via `stretchable` bindings).
10
+
11
+ - **`fill-available` size mode removed**: This was a non-standard CSS value internal to PicTex 1.x. Use `flex-grow: 1` in your CSS instead for elements that should fill available space.
12
+
13
+ ### ✨ New Features
14
+
15
+ - **Full CSS Positioning Support**: Complete implementation of CSS positioning model
16
+ - `position: relative` with `top`, `right`, `bottom`, `left` offsets
17
+ - `position: absolute` for parent-relative positioning
18
+ - `position: fixed` for canvas-relative positioning
19
+ - All four inset properties (`top`, `right`, `bottom`, `left`) now supported
20
+
21
+ - **Flex Item Properties**: Fine-grained flexbox control
22
+ - `flex-grow`: Control how elements grow to fill available space
23
+ - `flex-shrink`: Control how elements shrink when space is limited
24
+ - `align-self`: Override container's alignment for individual items
25
+
26
+ - **Multi-line Flex Containers**:
27
+ - `flex-wrap: wrap` and `flex-wrap: wrap-reverse` for responsive layouts
28
+
29
+ - **Size Constraints**:
30
+ - `min-width`, `max-width`: Set width boundaries
31
+ - `min-height`, `max-height`: Set height boundaries
32
+ - All support both pixel and percentage values
33
+
34
+ - **Aspect Ratio**:
35
+ - `aspect-ratio`: Maintain element proportions (e.g., `16/9` or `1.777`)
36
+
37
+ - **CSS Transforms (translate only)**:
38
+ - `transform: translate(x, y)`, `translateX(x)`, `translateY(y)`
39
+ - Enables anchor-based centering: `top: 50%; left: 50%; transform: translate(-50%, -50%)`
40
+
41
+ - **CSS-Standard Values**: Now accepts both CSS standard values (`start`, `end`) and flex-prefixed values (`flex-start`, `flex-end`) for `justify-content` and `align-items`
42
+
43
+ ### 🔧 Improvements
44
+
45
+ - **Robust Layout Engine**: Migrated to Taffy-based layout engine via PicTex 2.0 for improved flexbox correctness
46
+ - **Better Text Wrapping**: Improved text wrapping behavior in nested containers
47
+ - **Percentage-based Sizing**: More accurate percentage-based width/height calculations
48
+
49
+ ### 🏗️ Internal Changes
50
+
51
+ - Translator updated to use PicTex 2.0 API:
52
+ - `justify_content()` replaces `horizontal_distribution()`/`vertical_distribution()`
53
+ - `align_items()` replaces `vertical_align()`/`horizontal_align()`
54
+ - Positioning uses keyword arguments (`top=`, `left=`, etc.) instead of positional args
55
+ - Added new helper methods for size constraints, aspect ratio, and flex item properties
56
+ - Updated CSS validation to recognize new properties
57
+
58
+ ## [0.1.3] - 2024-09-13
59
+
60
+ ### ✨ New Features
61
+ - **Individual Border-Radius Properties**: Full support for individual corner border-radius properties
62
+ - `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`
63
+ - Works alongside existing shorthand `border-radius` property
64
+ - Support for both px and percentage values for each corner
65
+ - Proper priority handling: individual properties override shorthand when specified
66
+
67
+ - **Alpha Channel Color Support**: Enhanced color handling with full alpha channel support
68
+ - RGBA colors now properly rendered with transparency
69
+ - Alpha values below 0.01 automatically converted to 'transparent'
70
+ - Improved color validation and normalization
71
+ - Full hex RGBA support (#rrggbbaa format)
72
+
73
+ - **Display None Support**: Complete CSS `display: none` implementation
74
+ - Elements with `display: none` are completely omitted from rendering
75
+ - Children of hidden elements are also properly excluded
76
+ - Zero performance impact for hidden elements (not rendered at all)
77
+ - Semantically correct behavior matching standard CSS
78
+
79
+ ### 🔧 Improvements
80
+ - Enhanced CSS parser to recognize and validate individual border-radius properties
81
+ - Updated translator to use PicTex's native 4-corner border-radius API
82
+ - Improved color parsing system with better error handling and transparency support
83
+ - Optimized element generation to skip hidden elements entirely
84
+
85
+ ### 🏗️ Architecture Changes
86
+ - Extended CSS property validation lists to include individual border-radius properties
87
+ - Modified translator's `_get_border_radius_values()` to return proper PicTex format
88
+ - Updated style engine's `_normalize_display()` to handle 'none' value
89
+ - Added early return logic in `_create_element_builder()` for display: none elements
90
+
91
+ ## [0.1.2] - 2024-09-13
92
+
93
+ ### ✨ New Features
94
+ - **@font-face Support**: Full CSS @font-face declarations with advanced font loading
95
+ - Complete @font-face parsing with `font-family`, `src`, `font-weight`, and `font-style` properties
96
+ - Support for multiple font weights and styles (normal, bold, italic) per font family
97
+ - Flexible font source paths: relative paths, absolute paths, and URLs
98
+
99
+ ### 🔧 Improvements
100
+ - Enhanced CSS parser to detect and process @font-face at-rules separately from regular CSS rules
101
+ - Added FontRegistry system for managing and resolving font declarations
102
+ - Updated font resolution logic to match fonts by weight and style specifications
103
+ - Improved typography system to use advanced font fallback chains instead of single font selection
104
+
105
+ ### 🏗️ Architecture Changes
106
+ - Added `FontFace` and `FontRegistry` classes to `models.py`
107
+ - Extended CSS parser with @font-face specific parsing methods
108
+ - Updated style engine and translator to integrate font registry throughout the rendering pipeline
109
+ - Modified core `Html2Pic` class to expose font registry in debug information
110
+
111
+ ## [0.1.1] - 2024-09-12
112
+
113
+ ### ✨ New Features
114
+ - **Linear Gradient Support**: Added full support for CSS `linear-gradient()` in backgrounds
115
+ - Angle-based gradients: `linear-gradient(135deg, #667eea, #764ba2)`
116
+ - Keyword directions: `linear-gradient(to right, red, blue)`
117
+ - Color stops with percentages: `linear-gradient(90deg, red 0%, blue 100%)`
118
+ - Multiple colors with automatic distribution
119
+ - Support for all CSS color formats (hex, rgb, rgba, named colors)
120
+
121
+ ### 🔧 Improvements
122
+ - Updated documentation with linear-gradient examples and limitations
123
+ - Enhanced background rendering system to handle both images and gradients
124
+ - Improved CSS parser to recognize linear-gradient as supported feature
125
+
126
+ ### 📝 Documentation
127
+ - Added comprehensive linear-gradient documentation to README
128
+ - Updated examples to showcase gradient capabilities
129
+ - Clarified that only linear gradients are supported (radial/conic not yet implemented)
130
+
131
+ ## [0.1.0] - 2024-09-12
132
+
133
+ ### Initial Release
134
+
135
+ #### ✨ Core Features
136
+ - **HTML to Image Conversion**: Convert HTML + CSS to high-quality images using PicTex as rendering engine
137
+ - **Modern CSS Layout**: Full flexbox support with `display: flex`, `justify-content`, `align-items`, `gap`, etc.
138
+ - **Rich Typography**: Font families, sizes, weights, colors, text decorations, text shadows
139
+ - **Complete Box Model**: Padding, margins, borders, border-radius support
140
+ - **Visual Effects**: Box shadows and text shadows with RGBA color support
141
+ - **Positioning**: Absolute positioning with `left` and `top` properties
142
+ - **Background Images & Gradients**: Support for `background-image` with `url()` syntax and `linear-gradient()`, plus `background-size` (cover, contain, tile)
143
+
144
+ #### 🏗️ Architecture
145
+ - **Modular Design**: Clean separation of HTML parser, CSS parser, style engine, and translator
146
+ - **Comprehensive Warnings System**: Detailed debugging information for unsupported features
147
+ - **CSS Cascade Engine**: Proper specificity calculations and inheritance
148
+ - **Smart Translation**: Maps HTML/CSS concepts to PicTex builders (Canvas, Row, Column, Text, Image)
149
+
150
+ #### 📋 Supported HTML Elements
151
+ - Container elements: `div`, `section`, `article`, `header`, `footer`, `main`, `nav`, `aside`
152
+ - Text elements: `h1`-`h6`, `p`, `span`, `strong`, `em`, `b`, `i`, `u`, `s`
153
+ - Media elements: `img`
154
+ - List elements: `ul`, `ol`, `li`
155
+ - Other: `a`, `br`, `hr`
156
+
157
+ #### 🎨 Supported CSS Features
158
+ - **Layout**: `display` (flex, block, inline), `flex-direction`, `justify-content`, `align-items`, `gap`
159
+ - **Box Model**: `width`, `height`, `padding`, `margin`, `border`, `border-radius`
160
+ - **Typography**: `font-family`, `font-size`, `font-weight`, `font-style`, `color`, `text-align`, `line-height`, `text-decoration`
161
+ - **Visual Effects**: `background-color`, `background-image`, `background-size`, `box-shadow`, `text-shadow`
162
+ - **Positioning**: `position: absolute` with `left` and `top`
163
+ - **Units**: `px`, `em`, `rem`, `%` support
164
+ - **Colors**: Hex, RGB, RGBA, and named colors
165
+
166
+ #### 🚨 Intelligent Warnings System
167
+ - **CSS Validation**: Warns about unexpected/invalid CSS property values
168
+ - **HTML Element Detection**: Warns about unrecognized or unsupported HTML elements
169
+ - **Feature Limitations**: Clear warnings about unsupported CSS features with alternatives
170
+ - **Color Fallbacks**: Automatic fallback for invalid colors with warnings
171
+ - **Categorized Warnings**: Organized by HTML parsing, CSS parsing, style application, etc.
172
+
173
+ #### 🔧 Developer Experience
174
+ - **Simple API**: Clean `Html2Pic(html, css).render()` interface
175
+ - **Multiple Output Formats**: PNG, JPG via PicTex integration
176
+ - **Debug Information**: `get_warnings()`, `print_warnings()`, `get_warnings_summary()` methods
177
+ - **Error Handling**: Graceful degradation with informative warnings instead of crashes
178
+
179
+ #### 🏃‍♂️ Performance Features
180
+ - **Empty Element Optimization**: Only renders elements with visual styles
181
+ - **Smart RGBA Parsing**: Proper handling of RGBA colors in shadows and backgrounds
182
+ - **Efficient Shadow Parsing**: Supports multiple shadows on single elements
183
+
184
+ #### 🌟 Special Improvements
185
+ - **Fixed Empty Div Rendering**: Empty divs with visual styles (background, borders, shadows) now render correctly
186
+ - **Advanced Shadow Support**: Full CSS shadow syntax with multiple shadows and RGBA colors
187
+ - **Background Image Integration**: Complete CSS background-image support with PicTex backend
188
+ - **Comprehensive Property Validation**: Validates CSS values and provides helpful error messages
189
+
190
+ ### Known Limitations
191
+ - CSS Grid layout not supported (use Flexbox instead)
192
+ - Relative positioning not supported (use absolute positioning)
193
+ - CSS transforms and animations not supported
194
+ - Background gradients not supported (use solid colors or images)
195
+ - Complex selectors (descendants, pseudo-classes) not supported
196
+
197
+ ### Dependencies
198
+ - PicTex: High-quality rendering engine
199
+ - BeautifulSoup4: HTML parsing
200
+ - tinycss2: CSS parsing
201
+
202
+ ---
203
+
204
+ *This project was developed using AI assistance (Claude Code) for rapid prototyping and implementation.*
@@ -0,0 +1,367 @@
1
+ Metadata-Version: 2.4
2
+ Name: html2pic
3
+ Version: 0.2.1
4
+ Summary: Convert HTML + CSS to images without a browser
5
+ Project-URL: Homepage, https://github.com/francozanardi/html2pic
6
+ Project-URL: Repository, https://github.com/francozanardi/html2pic.git
7
+ Project-URL: Bug Tracker, https://github.com/francozanardi/html2pic/issues
8
+ Project-URL: Documentation, https://github.com/francozanardi/html2pic/blob/main/README.md
9
+ Project-URL: Examples, https://github.com/francozanardi/html2pic/tree/main/examples
10
+ Author-email: Franco Zanardi <francozanardi97@gmail.com>
11
+ License-Expression: MIT
12
+ Keywords: conversion,css,html,image,rendering
13
+ Classifier: Development Status :: 3 - Alpha
14
+ Classifier: Intended Audience :: Developers
15
+ Classifier: License :: OSI Approved :: MIT License
16
+ Classifier: Operating System :: OS Independent
17
+ Classifier: Programming Language :: Python :: 3
18
+ Classifier: Programming Language :: Python :: 3.8
19
+ Classifier: Programming Language :: Python :: 3.9
20
+ Classifier: Programming Language :: Python :: 3.10
21
+ Classifier: Programming Language :: Python :: 3.11
22
+ Classifier: Programming Language :: Python :: 3.12
23
+ Classifier: Topic :: Multimedia :: Graphics :: Graphics Conversion
24
+ Classifier: Topic :: Software Development :: Libraries :: Python Modules
25
+ Classifier: Topic :: Text Processing :: Markup :: HTML
26
+ Requires-Python: >=3.8
27
+ Requires-Dist: beautifulsoup4>=4.9.0
28
+ Requires-Dist: pictex>=2.0.0
29
+ Requires-Dist: tinycss2>=1.1.0
30
+ Provides-Extra: examples
31
+ Requires-Dist: pillow>=8.0.0; extra == 'examples'
32
+ Description-Content-Type: text/markdown
33
+
34
+ # html2pic
35
+
36
+ **Convert HTML + CSS to images — no browser required**
37
+
38
+ A Python library that transforms HTML and CSS into images.
39
+
40
+ ---
41
+
42
+ ## Features
43
+
44
+ - **Browser-Free Rendering** — No browser required
45
+ - **CSS Support** — Flexbox layout, gradients, shadows and more
46
+ - **Output Formats** — PNG, JPG, and SVG (basic support for SVGs)
47
+
48
+ ---
49
+
50
+ ## Installation
51
+
52
+ ```bash
53
+ pip install html2pic
54
+ ```
55
+
56
+ ---
57
+
58
+ ## Quick Start
59
+
60
+ ```python
61
+ from html2pic import Html2Pic
62
+
63
+ html = '''
64
+ <div class="card">
65
+ <h1>Hello, html2pic!</h1>
66
+ <p>Transform HTML to images with ease</p>
67
+ </div>
68
+ '''
69
+
70
+ css = '''
71
+ .card {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 40px;
76
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
77
+ border-radius: 20px;
78
+ width: 400px;
79
+ }
80
+
81
+ h1 {
82
+ color: white;
83
+ font-size: 32px;
84
+ font-weight: bold;
85
+ margin: 0 0 12px 0;
86
+ }
87
+
88
+ p {
89
+ color: rgba(255, 255, 255, 0.9);
90
+ font-size: 18px;
91
+ margin: 0;
92
+ }
93
+ '''
94
+
95
+ renderer = Html2Pic(html, css)
96
+ image = renderer.render()
97
+ image.save("output.png")
98
+ ```
99
+
100
+ **Result:**
101
+
102
+ ![Quick Start Example](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/01_quick_start_output.png)
103
+
104
+ ---
105
+
106
+ ## How It Works
107
+
108
+ html2pic translates web markup into PicTex rendering instructions:
109
+
110
+ ```
111
+ HTML + CSS → DOM Tree → Style Application → PicTex Builders → Image
112
+ ```
113
+
114
+ 1. **Parse HTML** with BeautifulSoup
115
+ 2. **Parse CSS** with tinycss2
116
+ 3. **Apply Styles** using CSS cascade, specificity, and inheritance
117
+ 4. **Translate** styled nodes to PicTex layout primitives (Canvas, Row, Column, Text, Image)
118
+ 5. **Render** using PicTex's Skia-based engine
119
+
120
+ ## CSS Support
121
+
122
+ html2pic supports a comprehensive subset of modern CSS. Here's what you can use:
123
+
124
+ ### Layout
125
+
126
+ | Property | Values | Notes |
127
+ |----------|--------|-------|
128
+ | `display` | `block`, `flex`, `none` | Flexbox is fully supported |
129
+ | `flex-direction` | `row`, `column`, `row-reverse`, `column-reverse` | |
130
+ | `justify-content` | `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly` | |
131
+ | `align-items` | `start`, `center`, `end`, `stretch` | |
132
+ | `align-self` | Same as `align-items` | Override per-item alignment |
133
+ | `flex-grow` | Number | Control growth ratio |
134
+ | `flex-shrink` | Number | Control shrink ratio |
135
+ | `flex-wrap` | `wrap`, `wrap-reverse`, `nowrap` | Multi-line containers |
136
+ | `gap` | `px`, `%` | Spacing between flex items |
137
+
138
+ ### Box Model
139
+
140
+ | Property | Values | Notes |
141
+ |----------|--------|-------|
142
+ | `width`, `height` | `px`, `%`, `auto`, `fit-content` | |
143
+ | `min-width`, `max-width` | `px`, `%` | Size constraints |
144
+ | `min-height`, `max-height` | `px`, `%` | Size constraints |
145
+ | `aspect-ratio` | Number or ratio (e.g., `16/9`) | Maintain proportions |
146
+ | `padding` | `px`, `%`, `em`, `rem` | Shorthand and individual sides |
147
+ | `margin` | `px`, `%`, `em`, `rem` | Shorthand and individual sides |
148
+ | `border` | Width, style, color | Styles: `solid`, `dashed`, `dotted` |
149
+ | `border-radius` | `px`, `%` | Shorthand or individual corners |
150
+
151
+ **Individual corner radius:**
152
+ - `border-top-left-radius`
153
+ - `border-top-right-radius`
154
+ - `border-bottom-left-radius`
155
+ - `border-bottom-right-radius`
156
+
157
+ ### Visual Styling
158
+
159
+ | Property | Values | Notes |
160
+ |----------|--------|-------|
161
+ | `background-color` | Hex, RGB, RGBA, named | Alpha channel supported |
162
+ | `background-image` | `url()`, `linear-gradient()` | See gradients section below |
163
+ | `background-size` | `cover`, `contain`, `tile` | For images |
164
+ | `box-shadow` | `offset-x offset-y blur color` | RGBA supported |
165
+
166
+ **Linear Gradients:**
167
+ ```css
168
+ /* Angle-based */
169
+ background-image: linear-gradient(135deg, #667eea, #764ba2);
170
+
171
+ /* Direction keywords */
172
+ background-image: linear-gradient(to right, red, blue);
173
+
174
+ /* Color stops */
175
+ background-image: linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
176
+ ```
177
+
178
+ ### Typography
179
+
180
+ | Property | Values | Notes |
181
+ |----------|--------|-------|
182
+ | `font-family` | Font names, file paths | See @font-face below |
183
+ | `font-size` | `px`, `em`, `rem` | |
184
+ | `font-weight` | `normal`, `bold`, `100-900` | |
185
+ | `font-style` | `normal`, `italic` | |
186
+ | `color` | Hex, RGB, RGBA, named | |
187
+ | `text-align` | `left`, `right`, `center`, `justify` | |
188
+ | `line-height` | Number, `px`, `%` | |
189
+ | `text-decoration` | `underline`, `line-through` | |
190
+ | `text-shadow` | `offset-x offset-y blur color` | |
191
+
192
+ **@font-face Support:**
193
+ ```css
194
+ @font-face {
195
+ font-family: "CustomFont";
196
+ src: url("./fonts/custom.ttf");
197
+ font-weight: normal;
198
+ font-style: normal;
199
+ }
200
+
201
+ @font-face {
202
+ font-family: "CustomFont";
203
+ src: url("./fonts/custom-bold.ttf");
204
+ font-weight: bold;
205
+ }
206
+
207
+ h1 {
208
+ font-family: "CustomFont", Arial, sans-serif;
209
+ font-weight: bold;
210
+ }
211
+ ```
212
+
213
+ **Features:**
214
+ - Multiple weights and styles per family
215
+ - Fallback chains (prioritizes @font-face, then system fonts)
216
+ - Relative, absolute paths, and URLs
217
+
218
+ ### Positioning & Transforms
219
+
220
+ | Property | Values | Notes |
221
+ |----------|--------|-------|
222
+ | `position` | `static`, `relative`, `absolute`, `fixed` | |
223
+ | `top`, `right`, `bottom`, `left` | `px`, `%`, `em`, `rem` | |
224
+ | `transform` | `translate()`, `translateX()`, `translateY()` | Only translate supported |
225
+
226
+ **Centering with transforms:**
227
+ ```css
228
+ .centered {
229
+ position: absolute;
230
+ top: 50%;
231
+ left: 50%;
232
+ transform: translate(-50%, -50%);
233
+ }
234
+ ```
235
+
236
+ ### Selectors
237
+
238
+ - **Tag:** `div`, `p`, `h1`, etc.
239
+ - **Class:** `.my-class`
240
+ - **ID:** `#my-id`
241
+ - **Universal:** `*`
242
+
243
+ ---
244
+
245
+ ## Examples
246
+
247
+ Complete examples with source code are available in the [`examples/`](examples/) directory.
248
+
249
+ ### Basic Card Layout
250
+
251
+ Simple flexbox card with centered content:
252
+
253
+ ![Quick Start](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/01_quick_start_output.png)
254
+
255
+ ### User Profile Card
256
+
257
+ Social media style card with avatar and information:
258
+
259
+ ![Flexbox Card](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/02_flexbox_card_output.png)
260
+
261
+ ### Typography Showcase
262
+
263
+ Advanced text styling and formatting:
264
+
265
+ ![Typography](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/03_typography_showcase_output.png)
266
+
267
+ ### Visual Effects
268
+
269
+ Shadows, positioning, and advanced styling:
270
+
271
+ ![Shadows and Effects](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/04_shadows_and_effects_output.png)
272
+
273
+ ### Background Images
274
+
275
+ Background image support with different sizing modes:
276
+
277
+ ![Background Images](https://raw.githubusercontent.com/francozanardi/html2pic/main/examples/05_background_images_output.png)
278
+
279
+ [View all examples with source code](examples/)
280
+
281
+ ---
282
+
283
+ ## API Reference
284
+
285
+ ### `Html2Pic(html: str, css: str = "")`
286
+
287
+ Main renderer class.
288
+
289
+ **Methods:**
290
+
291
+ | Method | Returns | Description |
292
+ |--------|---------|-------------|
293
+ | `render(crop_mode=CropMode.CONTENT_BOX)` | `BitmapImage` | Render to PNG/JPG |
294
+ | `render_as_svg(embed_font=True)` | `VectorImage` | Render to SVG |
295
+ | `debug_info()` | `dict` | Get parsing and styling details |
296
+
297
+ **Output Formats:**
298
+
299
+ The returned `BitmapImage` and `VectorImage` objects provide:
300
+
301
+ ```python
302
+ # Save to file
303
+ image.save("output.png")
304
+
305
+ # Convert to other formats
306
+ numpy_array = image.to_numpy()
307
+ pil_image = image.to_pillow()
308
+
309
+ # Display
310
+ image.show()
311
+ ```
312
+
313
+ ---
314
+
315
+ ## Limitations
316
+
317
+ html2pic supports a subset of CSS, several features are not implemented:
318
+
319
+ | Feature | Status | Alternative |
320
+ |---------|--------|-------------|
321
+ | CSS Grid | ❌ Not supported | Use Flexbox |
322
+ | Transforms (rotate, scale, skew) | ❌ Not supported | Only `translate()` works |
323
+ | Animations & Transitions | ❌ Not supported | Generate static images |
324
+ | Radial/Conic Gradients | ❌ Not supported | Use `linear-gradient()` |
325
+ | Complex Selectors | ❌ Not supported | Use simple tag, class, or ID selectors |
326
+ | Pseudo-classes (`:hover`, `:nth-child`) | ❌ Not supported | Apply styles directly |
327
+ | Media Queries | ❌ Not supported | Set explicit dimensions |
328
+ | Overflow & Scrolling | ❌ Not supported | Content must fit container |
329
+
330
+ ---
331
+
332
+ ## Contributing
333
+
334
+ Contributions are welcome! Please feel free to:
335
+
336
+ - Report bugs via [GitHub Issues](https://github.com/francozanardi/html2pic/issues)
337
+ - Suggest features or improvements
338
+ - Submit pull requests
339
+
340
+ For major changes, please open an issue first to discuss your ideas.
341
+
342
+ ---
343
+
344
+ ## License
345
+
346
+ MIT License - see [LICENSE](LICENSE) file for details.
347
+
348
+ ---
349
+
350
+ ## Acknowledgments
351
+
352
+ Built with:
353
+ - **[PicTex](https://github.com/francozanardi/pictex)** — High-performance rendering engine (Skia + Taffy)
354
+ - **[BeautifulSoup](https://www.crummy.com/software/BeautifulSoup/)** — HTML parsing
355
+ - **[tinycss2](https://github.com/Kozea/tinycss2)** — CSS parsing
356
+
357
+ ---
358
+
359
+ ## Version & Status
360
+
361
+ See [CHANGELOG.md](CHANGELOG.md) for version history and migration guides.
362
+
363
+ ---
364
+
365
+ ## Development Status
366
+
367
+ **Note:** This software is currently in early alpha stage. It lacks test coverage and may contain bugs or unexpected behavior. Use with caution in production environments and please report any issues you encounter.