Skip to content

Instantly share code, notes, and snippets.

@kevinschaul

kevinschaul/with-center-fix.html

Created August 20, 2019 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinschaul/2b0e5c80c92493842a12b2551ea5245f to your computer and use it in GitHub Desktop.
Save kevinschaul/2b0e5c80c92493842a12b2551ea5245f to your computer and use it in GitHub Desktop.
Download ZIP
ai2html: Demonstrating the max_width + center_html_output issue
Raw
with-center-fix.html
<!-- Generated by ai2html v0.92.0 - 2019-08-20 16:50 -->
<!-- ai file: ai2html-center-max-width-test.ai -->
<style type='text/css' media='screen,print'>
#g-ai2html-center-max-width-test-box {
max-width:600px;
}
#g-ai2html-center-max-width-test-box,
#g-ai2html-center-max-width-test-box .g-artboard {
margin:0 auto;
}
#g-ai2html-center-max-width-test-box p {
margin:0;
}
.g-aiAbs {
position:absolute;
}
.g-aiImg {
position:absolute;
top:0;
display:block;
width:100% !important;
}
.g-aiSymbol {
position: absolute;
box-sizing: border-box;
}
.g-aiPointText p { white-space: nowrap; }
#g-ai2html-center-max-width-test-Artboard_1 {
position:relative;
overflow:hidden;
}
#g-ai2html-center-max-width-test-Artboard_1 p {
font-family:georgia,'times new roman',times,serif;
font-size:30px;
line-height:36px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
position:static;
}
#g-ai2html-center-max-width-test-Artboard_1 .g-pstyle0 {
text-align:center;
}
#g-ai2html-center-max-width-test-Artboard_1_copy {
position:relative;
overflow:hidden;
}
#g-ai2html-center-max-width-test-Artboard_1_copy p {
font-family:georgia,'times new roman',times,serif;
font-size:30px;
line-height:36px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
position:static;
}
#g-ai2html-center-max-width-test-Artboard_1_copy .g-pstyle0 {
text-align:center;
}
</style>
<div id="g-ai2html-center-max-width-test-box" class="ai2html">
<!-- Artboard: Artboard_1 -->
<div id="g-ai2html-center-max-width-test-Artboard_1" class="g-artboard" style="" data-aspect-ratio="2.12" data-min-width="600">
<div style="width:600px; height:282.999999999999px;"></div>
<img id="g-ai2html-center-max-width-test-Artboard_1-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1.png"/>
<div id="g-ai0-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:49.9894%;margin-left:-44.6667%;width:89.3333%;">
<p class="g-pstyle0">ai2html center and max-width test</p>
</div>
</div>
<!-- Artboard: Artboard_1_copy -->
<div id="g-ai2html-center-max-width-test-Artboard_1_copy" class="g-artboard" style="max-width: 300px;max-height: 283px" data-aspect-ratio="1.06" data-min-width="0" data-max-width="599">
<div style="padding: 0 0 94.3333% 0;"></div>
<img id="g-ai2html-center-max-width-test-Artboard_1_copy-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1_copy.png"/>
<div id="g-ai1-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:50%;margin-left:-43%;width:86%;">
<p class="g-pstyle0">ai2html center and max-width test</p>
</div>
</div>
</div>
<script type="text/javascript">
(function (containerId, opts) {
if (!("querySelector" in document)) return;
var container = document.getElementById(containerId);
var nameSpace = opts.namespace || '';
var onResize = throttle(update, 200);
var waiting = !!window.IntersectionObserver;
var observer;
update();
document.addEventListener("DOMContentLoaded", update);
window.addEventListener("resize", onResize);
// NYT Scoop-specific code
if (opts.setup) {
opts.setup(container).on('cleanup', cleanup);
}
function cleanup() {
document.removeEventListener("DOMContentLoaded", update);
window.removeEventListener("resize", onResize);
if (observer) observer.disconnect();
}
function update() {
var artboards = selectChildren("." + nameSpace + "artboard[data-min-width]", container),
width = Math.round(container.getBoundingClientRect().width);
// Set artboard visibility based on container width
artboards.forEach(function(el) {
var minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
if (!waiting) {
selectChildren("." + nameSpace + "aiImg", el).forEach(updateImgSrc);
}
el.style.display = "block";
} else {
el.style.display = "none";
}
});
// Initialize lazy loading on first call
if (waiting && !observer) {
if (elementInView(container)) {
waiting = false;
update();
} else {
observer = new IntersectionObserver(onIntersectionChange, {});
observer.observe(container);
}
}
}
function elementInView(el) {
var bounds = el.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
// Replace blank placeholder image with actual image
function updateImgSrc(img) {
var src = img.getAttribute("data-src");
if (src && img.getAttribute("src") != src) {
img.setAttribute("src", src);
}
}
function onIntersectionChange(entries) {
if (entries.length && entries[0].isIntersecting) {
waiting = false;
observer.disconnect();
observer = null;
update();
}
}
function selectChildren(selector, parent) {
return parent ? Array.prototype.slice.call(parent.querySelectorAll(selector)) : [];
}
// based on underscore.js
function throttle(func, wait) {
var timeout = null, previous = 0;
function run() {
previous = Date.now();
timeout = null;
func();
}
return function() {
var remaining = wait - (Date.now() - previous);
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
run();
} else if (!timeout) {
timeout = setTimeout(run, remaining);
}
};
}
})("g-ai2html-center-max-width-test-box", {namespace: "g-", setup: window.setupInteractive || window.getComponent});
</script>
<!-- End ai2html - 2019-08-20 16:50 -->
Raw
without-center-fix.html
<!-- Generated by ai2html v0.92.0 - 2019-08-20 16:50 -->
<!-- ai file: ai2html-center-max-width-test.ai -->
<style type='text/css' media='screen,print'>
#g-ai2html-center-max-width-test-box {
max-width:600px;
}
#g-ai2html-center-max-width-test-box .g-artboard {
margin:0 auto;
}
#g-ai2html-center-max-width-test-box p {
margin:0;
}
.g-aiAbs {
position:absolute;
}
.g-aiImg {
position:absolute;
top:0;
display:block;
width:100% !important;
}
.g-aiSymbol {
position: absolute;
box-sizing: border-box;
}
.g-aiPointText p { white-space: nowrap; }
#g-ai2html-center-max-width-test-Artboard_1 {
position:relative;
overflow:hidden;
}
#g-ai2html-center-max-width-test-Artboard_1 p {
font-family:georgia,'times new roman',times,serif;
font-size:30px;
line-height:36px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
position:static;
}
#g-ai2html-center-max-width-test-Artboard_1 .g-pstyle0 {
text-align:center;
}
#g-ai2html-center-max-width-test-Artboard_1_copy {
position:relative;
overflow:hidden;
}
#g-ai2html-center-max-width-test-Artboard_1_copy p {
font-family:georgia,'times new roman',times,serif;
font-size:30px;
line-height:36px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
position:static;
}
#g-ai2html-center-max-width-test-Artboard_1_copy .g-pstyle0 {
text-align:center;
}
</style>
<div id="g-ai2html-center-max-width-test-box" class="ai2html">
<!-- Artboard: Artboard_1 -->
<div id="g-ai2html-center-max-width-test-Artboard_1" class="g-artboard" style="" data-aspect-ratio="2.12" data-min-width="600">
<div style="width:600px; height:282.999999999999px;"></div>
<img id="g-ai2html-center-max-width-test-Artboard_1-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1.png"/>
<div id="g-ai0-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:49.9894%;margin-left:-44.6667%;width:89.3333%;">
<p class="g-pstyle0">ai2html center and max-width test</p>
</div>
</div>
<!-- Artboard: Artboard_1_copy -->
<div id="g-ai2html-center-max-width-test-Artboard_1_copy" class="g-artboard" style="max-width: 300px;max-height: 283px" data-aspect-ratio="1.06" data-min-width="0" data-max-width="599">
<div style="padding: 0 0 94.3333% 0;"></div>
<img id="g-ai2html-center-max-width-test-Artboard_1_copy-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1_copy.png"/>
<div id="g-ai1-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:50%;margin-left:-43%;width:86%;">
<p class="g-pstyle0">ai2html center and max-width test</p>
</div>
</div>
</div>
<script type="text/javascript">
(function (containerId, opts) {
if (!("querySelector" in document)) return;
var container = document.getElementById(containerId);
var nameSpace = opts.namespace || '';
var onResize = throttle(update, 200);
var waiting = !!window.IntersectionObserver;
var observer;
update();
document.addEventListener("DOMContentLoaded", update);
window.addEventListener("resize", onResize);
// NYT Scoop-specific code
if (opts.setup) {
opts.setup(container).on('cleanup', cleanup);
}
function cleanup() {
document.removeEventListener("DOMContentLoaded", update);
window.removeEventListener("resize", onResize);
if (observer) observer.disconnect();
}
function update() {
var artboards = selectChildren("." + nameSpace + "artboard[data-min-width]", container),
width = Math.round(container.getBoundingClientRect().width);
// Set artboard visibility based on container width
artboards.forEach(function(el) {
var minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
if (!waiting) {
selectChildren("." + nameSpace + "aiImg", el).forEach(updateImgSrc);
}
el.style.display = "block";
} else {
el.style.display = "none";
}
});
// Initialize lazy loading on first call
if (waiting && !observer) {
if (elementInView(container)) {
waiting = false;
update();
} else {
observer = new IntersectionObserver(onIntersectionChange, {});
observer.observe(container);
}
}
}
function elementInView(el) {
var bounds = el.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
// Replace blank placeholder image with actual image
function updateImgSrc(img) {
var src = img.getAttribute("data-src");
if (src && img.getAttribute("src") != src) {
img.setAttribute("src", src);
}
}
function onIntersectionChange(entries) {
if (entries.length && entries[0].isIntersecting) {
waiting = false;
observer.disconnect();
observer = null;
update();
}
}
function selectChildren(selector, parent) {
return parent ? Array.prototype.slice.call(parent.querySelectorAll(selector)) : [];
}
// based on underscore.js
function throttle(func, wait) {
var timeout = null, previous = 0;
function run() {
previous = Date.now();
timeout = null;
func();
}
return function() {
var remaining = wait - (Date.now() - previous);
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
run();
} else if (!timeout) {
timeout = setTimeout(run, remaining);
}
};
}
})("g-ai2html-center-max-width-test-box", {namespace: "g-", setup: window.setupInteractive || window.getComponent});
</script>
<!-- End ai2html - 2019-08-20 16:50 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment