How ai2html is being used
| Characteristic | Value |
|---|---|
| Sizes (width) | 600px |
responsiveness |
dynamic |
output |
multiple-files |
The actual artboard size is not known, but is probably 600px. The output is probably in multiple-files mode. This is when each artboard is written to separate files. You must then write custom layout HTML to arrange containers differently based on screen width or parent container width.
wide
mobile
Additionally, responsiveness is set to dynamic. It means that the ai2html divs will scale to fill the container it is placed in. In this NYT graphic, at 720px screen width or larger, the top <html> tag adds a viewport-medium class, which applies a display: inline-block on the three map containers, making them appear side by side for larger screen sizes.
| Characteristic | Value |
|---|---|
| Sizes (width x height) |
12960x960px and 8100x600px
|
This is a cool one. It’s very very wide artboard, shown part by part using JavaScript / CSS. The base map is made in ai2html.
This is what the base image looks like.
| Characteristic | Value |
|---|---|
| Sizes (width) |
280px and 600px
|
responsiveness |
fixed |
600px
| Characteristic | Value |
|---|---|
| Sizes (width) |
280px, 600px, 980px and 1200px
|
responsiveness |
fixed |
1200px
280px
