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.
- html2pic-0.2.1/.gitignore +145 -0
- html2pic-0.2.1/CHANGELOG.md +204 -0
- html2pic-0.2.1/PKG-INFO +367 -0
- html2pic-0.2.1/README.md +334 -0
- html2pic-0.2.1/examples/01_quick_start.py +54 -0
- html2pic-0.2.1/examples/01_quick_start_output.png +0 -0
- html2pic-0.2.1/examples/02_flexbox_card.py +63 -0
- html2pic-0.2.1/examples/02_flexbox_card_output.png +0 -0
- html2pic-0.2.1/examples/03_typography_showcase.py +57 -0
- html2pic-0.2.1/examples/03_typography_showcase_output.png +0 -0
- html2pic-0.2.1/examples/04_shadows_and_effects.py +85 -0
- html2pic-0.2.1/examples/04_shadows_and_effects_output.png +0 -0
- html2pic-0.2.1/examples/05_background_images.py +86 -0
- html2pic-0.2.1/examples/05_background_images_output.png +0 -0
- html2pic-0.2.1/examples/README.md +76 -0
- html2pic-0.2.1/examples/advanced_styling_example.png +0 -0
- html2pic-0.2.1/examples/background.webp +0 -0
- html2pic-0.2.1/examples/border_radius_example.png +0 -0
- html2pic-0.2.1/pyproject.toml +74 -0
- html2pic-0.2.1/src/html2pic/__init__.py +18 -0
- html2pic-0.2.1/src/html2pic/dom/__init__.py +5 -0
- html2pic-0.2.1/src/html2pic/dom/dom_node.py +44 -0
- html2pic-0.2.1/src/html2pic/dom/node_type.py +7 -0
- html2pic-0.2.1/src/html2pic/exceptions.py +16 -0
- html2pic-0.2.1/src/html2pic/fonts/__init__.py +6 -0
- html2pic-0.2.1/src/html2pic/fonts/font_face.py +19 -0
- html2pic-0.2.1/src/html2pic/fonts/font_registry.py +48 -0
- html2pic-0.2.1/src/html2pic/fonts/font_src_parser.py +48 -0
- html2pic-0.2.1/src/html2pic/html2pic.py +123 -0
- html2pic-0.2.1/src/html2pic/parsing/__init__.py +15 -0
- html2pic-0.2.1/src/html2pic/parsing/css_parser.py +176 -0
- html2pic-0.2.1/src/html2pic/parsing/css_rule.py +12 -0
- html2pic-0.2.1/src/html2pic/parsing/html_parser.py +76 -0
- html2pic-0.2.1/src/html2pic/parsing/selector.py +31 -0
- html2pic-0.2.1/src/html2pic/parsing/shorthand_expander.py +78 -0
- html2pic-0.2.1/src/html2pic/styling/__init__.py +14 -0
- html2pic-0.2.1/src/html2pic/styling/cascade_resolver.py +57 -0
- html2pic-0.2.1/src/html2pic/styling/color_normalizer.py +66 -0
- html2pic-0.2.1/src/html2pic/styling/default_styles.py +73 -0
- html2pic-0.2.1/src/html2pic/styling/style_engine.py +111 -0
- html2pic-0.2.1/src/html2pic/styling/unit_converter.py +61 -0
- html2pic-0.2.1/src/html2pic/translation/__init__.py +6 -0
- html2pic-0.2.1/src/html2pic/translation/element_factory.py +59 -0
- html2pic-0.2.1/src/html2pic/translation/shadow_parser.py +130 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/__init__.py +24 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/background_applicator.py +156 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/base_applicator.py +14 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/border_applicator.py +68 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/layout_applicator.py +68 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/positioning_applicator.py +86 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/shadow_applicator.py +26 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/size_applicator.py +123 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/spacing_applicator.py +50 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/transform_applicator.py +128 -0
- html2pic-0.2.1/src/html2pic/translation/style_applicators/typography_applicator.py +129 -0
- html2pic-0.2.1/src/html2pic/translation/translator.py +126 -0
- html2pic-0.2.1/src/html2pic/translation/value_parsers.py +61 -0
- html2pic-0.2.1/src/html2pic/warnings/__init__.py +5 -0
- html2pic-0.2.1/src/html2pic/warnings/warning_category.py +13 -0
- 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.*
|
html2pic-0.2.1/PKG-INFO
ADDED
|
@@ -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
|
+

|
|
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
|
+

|
|
254
|
+
|
|
255
|
+
### User Profile Card
|
|
256
|
+
|
|
257
|
+
Social media style card with avatar and information:
|
|
258
|
+
|
|
259
|
+

|
|
260
|
+
|
|
261
|
+
### Typography Showcase
|
|
262
|
+
|
|
263
|
+
Advanced text styling and formatting:
|
|
264
|
+
|
|
265
|
+

|
|
266
|
+
|
|
267
|
+
### Visual Effects
|
|
268
|
+
|
|
269
|
+
Shadows, positioning, and advanced styling:
|
|
270
|
+
|
|
271
|
+

|
|
272
|
+
|
|
273
|
+
### Background Images
|
|
274
|
+
|
|
275
|
+
Background image support with different sizing modes:
|
|
276
|
+
|
|
277
|
+

|
|
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.
|