dom-to-pptx 1.0.5 → 1.0.7
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.
- package/CHANGELOG.md +31 -18
- package/{Readme.md → README.md} +165 -85
- package/SUPPORTED.md +50 -50
- package/dist/dom-to-pptx.bundle.js +18565 -30968
- package/dist/dom-to-pptx.cjs +358 -304
- package/dist/dom-to-pptx.min.js +356 -304
- package/dist/dom-to-pptx.mjs +352 -301
- package/package.json +73 -73
- package/rollup.config.js +62 -53
- package/src/image-processor.js +79 -76
- package/src/index.js +222 -148
- package/src/utils.js +59 -23
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,31 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
|
|
5
|
-
## [1.0.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
## [1.0.7] - 2025-12-12
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- **Fix Stacking Context/Z-Index**: Implemented logic to traverse and inherit Z-index from parents. Render queue is now sorted by Z-index then DOM order, preventing text from being hidden behind background cards.
|
|
10
|
+
- **Support Web Components/Icons**: Updated `createRenderItem` and `isTextContainer` to recognize `ion-icon` and custom tags. These are now rasterized via canvas rather than ignored.
|
|
11
|
+
- **Fix Mixed Content (Icons + Text)**: Switched main traversal loop to use `childNodes` instead of `children`. Added specific handler for `nodeType === 3` (Text Nodes) to render orphan text residing next to icons/shapes.
|
|
12
|
+
- **Fix Styled Inline Spans (Badges)**: Updated `isTextContainer` to return `false` if children have visible backgrounds or borders. This ensures elements like "Pune/Vashi" badges render as individual styled shapes instead of flattening into unstyled text runs.
|
|
13
|
+
|
|
14
|
+
## [1.0.6] - 2025-12-06
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
|
|
18
|
+
- Standalone UMD bundle `dist/dom-to-pptx.bundle.js` which includes runtime dependencies for single-script usage.
|
|
19
|
+
- `SUPPORTED.md` listing common supported HTML elements and CSS features.
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
|
|
23
|
+
- Rounded corner math: decreased false-positive circle detection and capped `rectRadius` to avoid pill-shaped elements becoming full circles.
|
|
24
|
+
- Partial border-radius clipping: elements inside `overflow:hidden` are now correctly rendered with clipping preserved.
|
|
25
|
+
- Very small elements (sub-pixel) rendering: lowered threshold to include tiny decorative elements (e.g., 2x2 dots).
|
|
26
|
+
- Backdrop blur support: simulated `backdrop-filter: blur()` using html2canvas snapshotting.
|
|
27
|
+
- CORS canvas errors: replaced fragile foreignObject rendering with safer SVG + canvas or html2canvas-based capture where appropriate.
|
|
28
|
+
|
|
29
|
+
## [1.0.3] - Previous
|
|
30
|
+
|
|
31
|
+
- Minor fixes and optimizations.
|
package/{Readme.md → README.md}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# dom-to-pptx
|
|
2
2
|
|
|
3
|
-
**The High-Fidelity HTML to PowerPoint Converter (v1.0.
|
|
3
|
+
**The High-Fidelity HTML to PowerPoint Converter (v1.0.7).**
|
|
4
4
|
|
|
5
5
|
Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable).
|
|
6
6
|
|
|
@@ -43,11 +43,9 @@ This library is intended for use in the browser (React, Vue, Svelte, Vanilla JS,
|
|
|
43
43
|
```javascript
|
|
44
44
|
import { exportToPptx } from 'dom-to-pptx';
|
|
45
45
|
|
|
46
|
-
// Note: If you are using a module bundler, it is recommended to import pptxgenjs
|
|
47
|
-
// directly into your project to ensure tree-shaking and optimal bundle size.
|
|
48
46
|
// import PptxGenJS from 'pptxgenjs'; // Uncomment and use if needed for your setup
|
|
49
47
|
|
|
50
|
-
document.getElementById('
|
|
48
|
+
document.getElementById('export-btn').addEventListener('click', async () => {
|
|
51
49
|
// Pass the CSS selector of the container you want to turn into a slide
|
|
52
50
|
await exportToPptx('#slide-container', {
|
|
53
51
|
fileName: 'slide-presentation.pptx',
|
|
@@ -78,20 +76,24 @@ You can use `dom-to-pptx` directly in the browser in two ways:
|
|
|
78
76
|
|
|
79
77
|
```html
|
|
80
78
|
<!-- Single script that contains dom-to-pptx + pptxgenjs + html2canvas -->
|
|
81
|
-
<script src="/
|
|
79
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.bundle.js"></script>
|
|
82
80
|
<script>
|
|
83
|
-
document.getElementById('
|
|
81
|
+
document.getElementById('export-btn').addEventListener('click', async () => {
|
|
84
82
|
// The library is available globally as `domToPptx`
|
|
85
83
|
await domToPptx.exportToPptx('#slide-container', { fileName: 'slide-presentation.pptx' });
|
|
86
84
|
});
|
|
87
85
|
</script>
|
|
88
86
|
```
|
|
89
87
|
|
|
90
|
-
You can
|
|
88
|
+
You can load the bundle from a CDN (unpkg/jsdelivr):
|
|
91
89
|
|
|
92
90
|
```html
|
|
93
91
|
<script src="https://unpkg.com/dom-to-pptx@latest/dist/dom-to-pptx.bundle.js"></script>
|
|
94
92
|
```
|
|
93
|
+
```html
|
|
94
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.bundle.js"></script>
|
|
95
|
+
```
|
|
96
|
+
|
|
95
97
|
|
|
96
98
|
- Legacy — Explicit runtime includes (smaller dom-to-pptx file, you manage deps):
|
|
97
99
|
|
|
@@ -101,7 +103,7 @@ You can also load the bundle from a CDN (unpkg/jsdelivr):
|
|
|
101
103
|
<!-- html2canvas is required by the legacy dom-to-pptx build for backdrop-filter and canvas image processing -->
|
|
102
104
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
103
105
|
<!-- Then load the legacy dom-to-pptx file that expects the above libs -->
|
|
104
|
-
<script src="/
|
|
106
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.min.js"></script>
|
|
105
107
|
<script>
|
|
106
108
|
document.getElementById('download-btn').addEventListener('click', async () => {
|
|
107
109
|
await domToPptx.exportToPptx('#slide-container', { fileName: 'slide-presentation.pptx' });
|
|
@@ -125,57 +127,172 @@ For the best results, treat your container as a fixed-size canvas. We recommend
|
|
|
125
127
|
<!-- The library will capture this background color/gradient automatically -->
|
|
126
128
|
<div
|
|
127
129
|
id="slide-container"
|
|
128
|
-
class="slide w-[1000px] h-[562px] bg-white
|
|
130
|
+
class="slide w-[1000px] h-[562px] bg-white rounded-xl overflow-hidden relative shadow-2xl shadow-black/50 flex"
|
|
129
131
|
>
|
|
132
|
+
<!-- Left Sidebar -->
|
|
130
133
|
<div
|
|
131
|
-
class="w-
|
|
132
|
-
border-l-2 border-indigo-500"
|
|
134
|
+
class="w-1/3 bg-slate-900 relative overflow-hidden flex flex-col p-10 justify-between"
|
|
133
135
|
>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
136
|
+
<!-- Decorative gradients -->
|
|
137
|
+
<div
|
|
138
|
+
class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none"
|
|
139
|
+
>
|
|
140
|
+
<div
|
|
141
|
+
class="absolute -top-20 -left-20 w-64 h-64 bg-purple-600 rounded-full blur-3xl mix-blend-screen"
|
|
142
|
+
></div>
|
|
143
|
+
<div
|
|
144
|
+
class="absolute bottom-0 right-0 w-80 h-80 bg-indigo-600 rounded-full blur-3xl mix-blend-screen"
|
|
145
|
+
></div>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="relative z-10">
|
|
148
|
+
<div
|
|
149
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 backdrop-blur-md mb-6"
|
|
150
|
+
>
|
|
151
|
+
<span
|
|
152
|
+
class="w-2 h-2 rounded-full bg-green-400 animate-pulse"
|
|
153
|
+
></span>
|
|
154
|
+
<span class="text-xs font-medium text-slate-300 tracking-wider"
|
|
155
|
+
>LIVE DATA</span
|
|
156
|
+
>
|
|
157
|
+
</div>
|
|
158
|
+
<h2 class="text-4xl font-bold text-white leading-tight mb-4">
|
|
159
|
+
Quarterly <br />
|
|
160
|
+
<span
|
|
161
|
+
class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400"
|
|
162
|
+
>Performance</span
|
|
163
|
+
>
|
|
137
164
|
</h2>
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
165
|
+
<p class="text-slate-400 leading-relaxed">
|
|
166
|
+
Visualizing the impact of high-fidelity DOM conversion on
|
|
167
|
+
presentation workflows.
|
|
168
|
+
</p>
|
|
169
|
+
</div>
|
|
170
|
+
<!-- Feature List (Flexbox/Grid test) -->
|
|
171
|
+
<div class="relative z-10 space-y-4">
|
|
172
|
+
<div
|
|
173
|
+
class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/5"
|
|
174
|
+
>
|
|
175
|
+
<div
|
|
176
|
+
class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold"
|
|
177
|
+
>
|
|
178
|
+
1
|
|
179
|
+
</div>
|
|
180
|
+
<div class="text-sm text-slate-300">Pixel-perfect Shadows</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div
|
|
183
|
+
class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/5"
|
|
184
|
+
>
|
|
185
|
+
<div
|
|
186
|
+
class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold"
|
|
187
|
+
>
|
|
188
|
+
2
|
|
189
|
+
</div>
|
|
190
|
+
<div class="text-sm text-slate-300">Complex Gradients</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
<!-- Right Content -->
|
|
195
|
+
<div class="w-2/3 bg-slate-50 p-10 relative">
|
|
196
|
+
<!-- Header -->
|
|
197
|
+
<div class="flex justify-between items-start mb-10">
|
|
198
|
+
<div>
|
|
199
|
+
<h3 class="text-slate-800 font-bold text-xl">
|
|
200
|
+
Revenue Breakdown
|
|
201
|
+
</h3>
|
|
202
|
+
<p class="text-slate-500 text-sm">Fiscal Year 2024</p>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="flex -space-x-2">
|
|
205
|
+
<!-- Rounded Images Test (CORS friendly) -->
|
|
206
|
+
<img
|
|
207
|
+
class="w-10 h-10 rounded-full border-2 border-white object-cover shadow-md"
|
|
208
|
+
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=64&h=64"
|
|
209
|
+
alt="User 1"
|
|
210
|
+
/>
|
|
211
|
+
<img
|
|
212
|
+
class="w-10 h-10 rounded-full border-2 border-white object-cover shadow-md"
|
|
213
|
+
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=64&h=64"
|
|
214
|
+
alt="User 2"
|
|
215
|
+
/>
|
|
216
|
+
<div
|
|
217
|
+
class="w-10 h-10 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center text-xs font-bold text-slate-500 shadow-md"
|
|
218
|
+
>
|
|
219
|
+
+5
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
<!-- Grid Layout Test -->
|
|
224
|
+
<div class="grid grid-cols-2 gap-6 mb-8">
|
|
225
|
+
<!-- Card 1: Gradient & Shadow -->
|
|
226
|
+
<div
|
|
227
|
+
class="bg-white p-5 rounded-xl complex-shadow border border-slate-100 relative overflow-hidden group"
|
|
228
|
+
>
|
|
229
|
+
<div class="relative z-10">
|
|
230
|
+
<p
|
|
231
|
+
class="text-xs font-bold text-indigo-500 uppercase tracking-wider mb-1"
|
|
232
|
+
>
|
|
233
|
+
Total Sales
|
|
234
|
+
</p>
|
|
235
|
+
<h4 class="text-3xl font-bold text-slate-800">$124,500</h4>
|
|
141
236
|
<div
|
|
142
|
-
class="
|
|
237
|
+
class="mt-3 flex items-center text-xs font-semibold text-green-600"
|
|
143
238
|
>
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
239
|
+
<svg
|
|
240
|
+
class="w-3 h-3 mr-1"
|
|
241
|
+
fill="none"
|
|
242
|
+
stroke="currentColor"
|
|
243
|
+
viewBox="0 0 24 24"
|
|
244
|
+
>
|
|
245
|
+
<path
|
|
246
|
+
stroke-linecap="round"
|
|
247
|
+
stroke-linejoin="round"
|
|
248
|
+
stroke-width="2"
|
|
249
|
+
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
|
250
|
+
></path>
|
|
251
|
+
</svg>
|
|
252
|
+
<span>+14.5%</span>
|
|
153
253
|
</div>
|
|
154
254
|
</div>
|
|
155
|
-
|
|
255
|
+
</div>
|
|
256
|
+
<!-- Card 2: Gradient Border/Background -->
|
|
257
|
+
<div
|
|
258
|
+
class="p-5 rounded-xl shadow-lg text-white relative overflow-hidden"
|
|
259
|
+
style="
|
|
260
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
261
|
+
"
|
|
262
|
+
>
|
|
263
|
+
<p
|
|
264
|
+
class="text-xs font-bold text-white/80 uppercase tracking-wider mb-1"
|
|
265
|
+
>
|
|
266
|
+
Active Users
|
|
267
|
+
</p>
|
|
268
|
+
<h4 class="text-3xl font-bold text-white">45.2k</h4>
|
|
269
|
+
<div class="mt-3 w-full bg-black/20 rounded-full h-1.5">
|
|
156
270
|
<div
|
|
157
|
-
class="
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
</div>
|
|
161
|
-
<div>
|
|
162
|
-
<h4 class="font-bold text-slate-700">Quantum Bit (Qubit)</h4>
|
|
163
|
-
<p>
|
|
164
|
-
Can be <span class="font-semibold text-indigo-600">0</span>,
|
|
165
|
-
<span class="font-semibold text-indigo-600">1</span>, or a
|
|
166
|
-
<span class="font-semibold text-indigo-600">superposition</span>
|
|
167
|
-
of both states simultaneously.
|
|
168
|
-
</p>
|
|
169
|
-
</div>
|
|
271
|
+
class="bg-white/90 h-1.5 rounded-full"
|
|
272
|
+
style="width: 70%"
|
|
273
|
+
></div>
|
|
170
274
|
</div>
|
|
171
275
|
</div>
|
|
172
276
|
</div>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
277
|
+
<!-- Complex Typography & Layout -->
|
|
278
|
+
<div class="bg-indigo-50/50 rounded-xl p-6 border border-indigo-100">
|
|
279
|
+
<h5 class="font-bold text-indigo-900 mb-3">Analysis Summary</h5>
|
|
280
|
+
<p class="text-indigo-800/80 text-sm leading-relaxed">
|
|
281
|
+
The
|
|
282
|
+
<span class="font-bold text-indigo-600">Q3 projection</span>
|
|
283
|
+
exceeds expectations due to the new
|
|
284
|
+
<span class="italic">optimization algorithm</span>. We observed a <strong class="text-indigo-700">240% increase</strong>
|
|
285
|
+
in processing speed across all nodes.
|
|
286
|
+
</p>
|
|
287
|
+
</div>
|
|
288
|
+
<!-- Floating Badge (Absolute positioning test) -->
|
|
289
|
+
<div
|
|
290
|
+
class="absolute bottom-6 right-6 bg-white/90 backdrop-blur px-4 py-2 rounded-lg shadow-lg border border-slate-200 flex items-center gap-2"
|
|
291
|
+
>
|
|
292
|
+
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
|
293
|
+
<span class="text-xs font-bold text-slate-600 uppercase"
|
|
294
|
+
>Confidential</span
|
|
295
|
+
>
|
|
179
296
|
</div>
|
|
180
297
|
</div>
|
|
181
298
|
</div>
|
|
@@ -209,41 +326,4 @@ MIT © [Atharva Dharmendra Jagtap](https://github.com/atharva9167j) and `dom-to-
|
|
|
209
326
|
|
|
210
327
|
## Acknowledgements
|
|
211
328
|
|
|
212
|
-
This project is built on top of [PptxGenJS](https://github.com/gitbrent/PptxGenJS). Huge thanks to the PptxGenJS maintainers and all contributors — dom-to-pptx leverages and extends their excellent work on PPTX generation.
|
|
213
|
-
|
|
214
|
-
## Bundle & Dependencies
|
|
215
|
-
|
|
216
|
-
Starting with v1.0.4 `dom-to-pptx` ships a standalone browser bundle that includes runtime dependencies (for convenience).
|
|
217
|
-
|
|
218
|
-
- If you use npm / a bundler, run:
|
|
219
|
-
|
|
220
|
-
```bash
|
|
221
|
-
npm install dom-to-pptx
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
- For direct browser usage (single script tag), use the bundled file that already includes `pptxgenjs` and `html2canvas`:
|
|
225
|
-
|
|
226
|
-
```html
|
|
227
|
-
<script src="/node_modules/dom-to-pptx/dist/dom-to-pptx.bundle.js"></script>
|
|
228
|
-
<script>
|
|
229
|
-
domToPptx.exportToPptx('#slide-container', { fileName: 'report.pptx' });
|
|
230
|
-
</script>
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
If you prefer to manage `pptxgenjs` yourself (smaller bundle), the legacy `dist/dom-to-pptx.min.js` remains available and expects `pptxgenjs` to be loaded separately.
|
|
234
|
-
|
|
235
|
-
Legacy usage note:
|
|
236
|
-
|
|
237
|
-
```html
|
|
238
|
-
<!-- Load pptxgenjs first -->
|
|
239
|
-
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@latest/dist/pptxgen.bundle.js"></script>
|
|
240
|
-
<!-- html2canvas is required by the legacy dom-to-pptx build for backdrop-filter and canvas image processing -->
|
|
241
|
-
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
242
|
-
<!-- Then load the legacy dom-to-pptx file that expects the above libs -->
|
|
243
|
-
<script src="/node_modules/dom-to-pptx/dist/dom-to-pptx.min.js"></script>
|
|
244
|
-
<script>
|
|
245
|
-
document.getElementById('download-btn').addEventListener('click', async () => {
|
|
246
|
-
await domToPptx.exportToPptx('#slide-container', { fileName: 'dashboard-report.pptx' });
|
|
247
|
-
});
|
|
248
|
-
</script>
|
|
249
|
-
```
|
|
329
|
+
This project is built on top of [PptxGenJS](https://github.com/gitbrent/PptxGenJS). Huge thanks to the PptxGenJS maintainers and all contributors — dom-to-pptx leverages and extends their excellent work on PPTX generation.
|
package/SUPPORTED.md
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
# Supported CSS & HTML
|
|
2
|
-
|
|
3
|
-
This document lists the common CSS features, Tailwind-like utility classes, and HTML elements that dom-to-pptx understands and maps to PowerPoint shapes/text.
|
|
4
|
-
|
|
5
|
-
Note: The library measures computed layout from the browser (getBoundingClientRect) and maps positions/sizes precisely to PPTX inches. If a CSS feature is not listed below it may still work because the browser computes layout and visual styles — the mapping focuses on visual fidelity.
|
|
6
|
-
|
|
7
|
-
## Supported HTML elements
|
|
8
|
-
|
|
9
|
-
- div, span, p, h1-h6
|
|
10
|
-
- img, svg
|
|
11
|
-
- ul, ol, li
|
|
12
|
-
- a
|
|
13
|
-
- button
|
|
14
|
-
- section, article, header, footer
|
|
15
|
-
- input (text), textarea (simple text extraction)
|
|
16
|
-
- figure, figcaption
|
|
17
|
-
|
|
18
|
-
## Supported CSS properties (rendered visually)
|
|
19
|
-
|
|
20
|
-
- background-color, background-image (linear-gradient)
|
|
21
|
-
- background-position, background-size (basic handling in gradients)
|
|
22
|
-
- color, opacity
|
|
23
|
-
- border, border
|
|
24
|
-
- box-shadow (outer shadows mapped to PPTX outer shadows)
|
|
25
|
-
- filter: blur() (soft-edge rendering via SVG)
|
|
26
|
-
- backdrop-filter: blur() (simulated via html2canvas snapshot)
|
|
27
|
-
- transform: rotate() (extraction of rotation angle)
|
|
28
|
-
- display, position, width, height, padding, margin
|
|
29
|
-
- text-align, vertical-align, white-space, text-transform
|
|
30
|
-
- font-family, font-size, font-weight, font-style, line-height
|
|
31
|
-
|
|
32
|
-
## Common utility/Tailwind-like classes (recognized by visual result)
|
|
33
|
-
|
|
34
|
-
These classes are examples; dom-to-pptx reads computed styles, so any combination that results in the same computed value will be supported.
|
|
35
|
-
|
|
36
|
-
- `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-full`, `rounded-tr-*`, `rounded-bl-full`, etc.
|
|
37
|
-
- `bg-white`, `bg-slate-50`, `bg-indigo-50`, `bg-gradient-to-r`, `from-indigo-400`, `to-cyan-400`, etc. (linear-gradients are parsed)
|
|
38
|
-
- `shadow`, `shadow-md`, `shadow-lg`, `shadow-2xl` (box-shadow)
|
|
39
|
-
- `flex`, `grid`, `items-center`, `justify-center`, `gap-*`
|
|
40
|
-
- `p-4`, `px-6`, `py-2`, `m-4`
|
|
41
|
-
- `w-*`, `h-*` (fixed pixel/percentage/wrappers — computed width/height are used)
|
|
42
|
-
- `text-xs`, `text-sm`, `text-lg`, `font-bold`, `uppercase`, `italic`, `tracking-wide`
|
|
43
|
-
|
|
44
|
-
## Limitations
|
|
45
|
-
|
|
46
|
-
- Complex CSS animations/transitions are not exported — only the current computed visual state is captured.
|
|
47
|
-
- Some advanced CSS features (CSS variables used as colors, filters beyond blur) may not map 1:1.
|
|
48
|
-
- For images to be processed via canvas (rounded images), the source must be CORS-accessible (`Access-Control-Allow-Origin` header) or the image will be skipped or rendered as-is.
|
|
49
|
-
|
|
50
|
-
If a style or element is critical and you find it not behaving as expected, open an issue with a minimal repro and I'll add support or provide a workaround.
|
|
1
|
+
# Supported CSS & HTML
|
|
2
|
+
|
|
3
|
+
This document lists the common CSS features, Tailwind-like utility classes, and HTML elements that dom-to-pptx understands and maps to PowerPoint shapes/text.
|
|
4
|
+
|
|
5
|
+
Note: The library measures computed layout from the browser (getBoundingClientRect) and maps positions/sizes precisely to PPTX inches. If a CSS feature is not listed below it may still work because the browser computes layout and visual styles — the mapping focuses on visual fidelity.
|
|
6
|
+
|
|
7
|
+
## Supported HTML elements
|
|
8
|
+
|
|
9
|
+
- div, span, p, h1-h6
|
|
10
|
+
- img, svg
|
|
11
|
+
- ul, ol, li
|
|
12
|
+
- a
|
|
13
|
+
- button
|
|
14
|
+
- section, article, header, footer
|
|
15
|
+
- input (text), textarea (simple text extraction)
|
|
16
|
+
- figure, figcaption
|
|
17
|
+
|
|
18
|
+
## Supported CSS properties (rendered visually)
|
|
19
|
+
|
|
20
|
+
- background-color, background-image (linear-gradient)
|
|
21
|
+
- background-position, background-size (basic handling in gradients)
|
|
22
|
+
- color, opacity
|
|
23
|
+
- border, border-_-color, border-_-width, border-radius (per-corner)
|
|
24
|
+
- box-shadow (outer shadows mapped to PPTX outer shadows)
|
|
25
|
+
- filter: blur() (soft-edge rendering via SVG)
|
|
26
|
+
- backdrop-filter: blur() (simulated via html2canvas snapshot)
|
|
27
|
+
- transform: rotate() (extraction of rotation angle)
|
|
28
|
+
- display, position, width, height, padding, margin
|
|
29
|
+
- text-align, vertical-align, white-space, text-transform
|
|
30
|
+
- font-family, font-size, font-weight, font-style, line-height
|
|
31
|
+
|
|
32
|
+
## Common utility/Tailwind-like classes (recognized by visual result)
|
|
33
|
+
|
|
34
|
+
These classes are examples; dom-to-pptx reads computed styles, so any combination that results in the same computed value will be supported.
|
|
35
|
+
|
|
36
|
+
- `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-full`, `rounded-tr-*`, `rounded-bl-full`, etc.
|
|
37
|
+
- `bg-white`, `bg-slate-50`, `bg-indigo-50`, `bg-gradient-to-r`, `from-indigo-400`, `to-cyan-400`, etc. (linear-gradients are parsed)
|
|
38
|
+
- `shadow`, `shadow-md`, `shadow-lg`, `shadow-2xl` (box-shadow)
|
|
39
|
+
- `flex`, `grid`, `items-center`, `justify-center`, `gap-*`
|
|
40
|
+
- `p-4`, `px-6`, `py-2`, `m-4`
|
|
41
|
+
- `w-*`, `h-*` (fixed pixel/percentage/wrappers — computed width/height are used)
|
|
42
|
+
- `text-xs`, `text-sm`, `text-lg`, `font-bold`, `uppercase`, `italic`, `tracking-wide`
|
|
43
|
+
|
|
44
|
+
## Limitations
|
|
45
|
+
|
|
46
|
+
- Complex CSS animations/transitions are not exported — only the current computed visual state is captured.
|
|
47
|
+
- Some advanced CSS features (CSS variables used as colors, filters beyond blur) may not map 1:1.
|
|
48
|
+
- For images to be processed via canvas (rounded images), the source must be CORS-accessible (`Access-Control-Allow-Origin` header) or the image will be skipped or rendered as-is.
|
|
49
|
+
|
|
50
|
+
If a style or element is critical and you find it not behaving as expected, open an issue with a minimal repro and I'll add support or provide a workaround.
|