From c9354c5f2e117e58129ba8b9bc3dfe08c9d74e10 Mon Sep 17 00:00:00 2001 From: Jonas Heinrich Date: Tue, 21 Jul 2020 09:49:33 +0200 Subject: [PATCH] better title text fitting responsive design --- kit/css/content.css | 11 +- kit/css/custom.css | 20 +++ kit/footer.php | 15 +- kit/header.php | 2 - kit/js/textFit.js | 238 ++++++++++++++++++++++++++++ kit/style.css | 10 +- kit/template-parts/content-page.php | 5 +- 7 files changed, 285 insertions(+), 16 deletions(-) create mode 100644 kit/js/textFit.js diff --git a/kit/css/content.css b/kit/css/content.css index 7582916..0f67f10 100644 --- a/kit/css/content.css +++ b/kit/css/content.css @@ -18,6 +18,7 @@ flex-wrap: nowrap; align-items: center; justify-content: flex-end; + /* overflow: hidden; */ } .intro-element .content-wrap * { @@ -30,13 +31,9 @@ .intro-element .content-wrap .h2 { color: #ffffff; text-shadow: 1px 1px 3px black; - width: 80vw; - max-height: 50vw; - font-size: calc(3vw + 3vh); - line-height: calc(3.5vw + 3.5vh); + /* font-size: calc(3vw + 3vh); + line-height: calc(3.5vw + 3.5vh); */ word-wrap: break-word; - /* text-overflow: ellipsis; - overflow-y: hidden; */ } .intro-element .video-loop { @@ -1429,7 +1426,7 @@ body.page-theme-color-secondary .teaser-box-category-marker:hover { } body.page-theme-color-secondary .teaser-box-category-marker::after { - content: url(../img/teaser-box-arrow-brand-secondary.svg); + mask: url('../img/teaser-box-arrow-brand-secondary.svg') no-repeat center / contain; } body.page-theme-color-tertiary .teaser-box-image { diff --git a/kit/css/custom.css b/kit/css/custom.css index 30abb47..501a59f 100644 --- a/kit/css/custom.css +++ b/kit/css/custom.css @@ -24,3 +24,23 @@ ul.bestandliste { margin-left: 1rem; font-weight: normal; } + +.intro-element .content-wrap #centeredMultiLine { + height: 60%; + width: 100%; + line-height: normal; + text-shadow: 1px 1px 3px black; + font-family: "Roboto", "Source Sans Pro", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-weight: 400; +} + +.intro-element { + padding: 2rem 0 2rem 0; +} + +/* @media (max-width: 1024px) { + .intro-element .content-wrap #centeredMultiLine { + height: 100%; + line-height: 4em; + } +} */ diff --git a/kit/footer.php b/kit/footer.php index eacf84b..f331e7c 100644 --- a/kit/footer.php +++ b/kit/footer.php @@ -14,6 +14,8 @@ + + @@ -21,10 +23,21 @@ - + + + diff --git a/kit/header.php b/kit/header.php index 178903e..d0ab406 100644 --- a/kit/header.php +++ b/kit/header.php @@ -22,8 +22,6 @@ - - diff --git a/kit/js/textFit.js b/kit/js/textFit.js new file mode 100644 index 0000000..ee96632 --- /dev/null +++ b/kit/js/textFit.js @@ -0,0 +1,238 @@ +/** + * textFit v2.3.1 + * Previously known as jQuery.textFit + * 11/2014 by STRML (strml.github.com) + * MIT License + * + * To use: textFit(document.getElementById('target-div'), options); + * + * Will make the *text* content inside a container scale to fit the container + * The container is required to have a set width and height + * Uses binary search to fit text with minimal layout calls. + * Version 2.0 does not use jQuery. + */ +/*global define:true, document:true, window:true, HTMLElement:true*/ + +(function(root, factory) { + "use strict"; + + // UMD shim + if (typeof define === "function" && define.amd) { + // AMD + define([], factory); + } else if (typeof exports === "object") { + // Node/CommonJS + module.exports = factory(); + } else { + // Browser + root.textFit = factory(); + } + +}(typeof global === "object" ? global : this, function () { + "use strict"; + + var defaultSettings = { + alignVert: false, // if true, textFit will align vertically using css tables + alignHoriz: false, // if true, textFit will set text-align: center + multiLine: false, // if true, textFit will not set white-space: no-wrap + detectMultiLine: true, // disable to turn off automatic multi-line sensing + minFontSize: 6, + maxFontSize: 80, + reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance + widthOnly: false, // if true, textFit will fit text to element width, regardless of text height + alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment + }; + + return function textFit(els, options) { + + if (!options) options = {}; + + // Extend options. + var settings = {}; + for(var key in defaultSettings){ + if(options.hasOwnProperty(key)){ + settings[key] = options[key]; + } else { + settings[key] = defaultSettings[key]; + } + } + + // Convert jQuery objects into arrays + if (typeof els.toArray === "function") { + els = els.toArray(); + } + + // Support passing a single el + var elType = Object.prototype.toString.call(els); + if (elType !== '[object Array]' && elType !== '[object NodeList]' && + elType !== '[object HTMLCollection]'){ + els = [els]; + } + + // Process each el we've passed. + for(var i = 0; i < els.length; i++){ + processItem(els[i], settings); + } + }; + + /** + * The meat. Given an el, make the text inside it fit its parent. + * @param {DOMElement} el Child el. + * @param {Object} settings Options for fit. + */ + function processItem(el, settings){ + if (!isElement(el) || (!settings.reProcess && el.getAttribute('textFitted'))) { + return false; + } + + // Set textFitted attribute so we know this was processed. + if(!settings.reProcess){ + el.setAttribute('textFitted', 1); + } + + var innerSpan, originalHeight, originalHTML, originalWidth; + var low, mid, high; + + // Get element data. + originalHTML = el.innerHTML; + originalWidth = innerWidth(el); + originalHeight = innerHeight(el); + + // Don't process if we can't find box dimensions + if (!originalWidth || (!settings.widthOnly && !originalHeight)) { + if(!settings.widthOnly) + throw new Error('Set a static height and width on the target element ' + el.outerHTML + + ' before using textFit!'); + else + throw new Error('Set a static width on the target element ' + el.outerHTML + + ' before using textFit!'); + } + + // Add textFitted span inside this container. + if (originalHTML.indexOf('textFitted') === -1) { + innerSpan = document.createElement('span'); + innerSpan.className = 'textFitted'; + // Inline block ensure it takes on the size of its contents, even if they are enclosed + // in other tags like

+ innerSpan.style['display'] = 'inline-block'; + innerSpan.innerHTML = originalHTML; + el.innerHTML = ''; + el.appendChild(innerSpan); + } else { + // Reprocessing. + innerSpan = el.querySelector('span.textFitted'); + // Remove vertical align if we're reprocessing. + if (hasClass(innerSpan, 'textFitAlignVert')){ + innerSpan.className = innerSpan.className.replace('textFitAlignVert', ''); + innerSpan.style['height'] = ''; + el.className.replace('textFitAlignVertFlex', ''); + } + } + + // Prepare & set alignment + if (settings.alignHoriz) { + el.style['text-align'] = 'center'; + innerSpan.style['text-align'] = 'center'; + } + + // Check if this string is multiple lines + // Not guaranteed to always work if you use wonky line-heights + var multiLine = settings.multiLine; + if (settings.detectMultiLine && !multiLine && + innerSpan.scrollHeight >= parseInt(window.getComputedStyle(innerSpan)['font-size'], 10) * 2){ + multiLine = true; + } + + // If we're not treating this as a multiline string, don't let it wrap. + if (!multiLine) { + el.style['white-space'] = 'nowrap'; + } + + low = settings.minFontSize + 1; + high = settings.maxFontSize + 1; + + // Binary search for best fit + while (low <= high) { + mid = parseInt((low + high) / 2, 10); + innerSpan.style.fontSize = mid + 'px'; + if(innerSpan.scrollWidth <= originalWidth && (settings.widthOnly || innerSpan.scrollHeight <= originalHeight)){ + low = mid + 1; + } else { + high = mid - 1; + } + // await injection point + } + // Sub 1 at the very end, this is closer to what we wanted. + innerSpan.style.fontSize = (mid - 1) + 'px'; + + // Our height is finalized. If we are aligning vertically, set that up. + if (settings.alignVert) { + addStyleSheet(); + var height = innerSpan.scrollHeight; + if (window.getComputedStyle(el)['position'] === "static"){ + el.style['position'] = 'relative'; + } + if (!hasClass(innerSpan, "textFitAlignVert")){ + innerSpan.className = innerSpan.className + " textFitAlignVert"; + } + innerSpan.style['height'] = height + "px"; + if (settings.alignVertWithFlexbox && !hasClass(el, "textFitAlignVertFlex")) { + el.className = el.className + " textFitAlignVertFlex"; + } + } + } + + // Calculate height without padding. + function innerHeight(el){ + var style = window.getComputedStyle(el, null); + return el.clientHeight - + parseInt(style.getPropertyValue('padding-top'), 10) - + parseInt(style.getPropertyValue('padding-bottom'), 10); + } + + // Calculate width without padding. + function innerWidth(el){ + var style = window.getComputedStyle(el, null); + return el.clientWidth - + parseInt(style.getPropertyValue('padding-left'), 10) - + parseInt(style.getPropertyValue('padding-right'), 10); + } + + //Returns true if it is a DOM element + function isElement(o){ + return ( + typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 + o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string" + ); + } + + function hasClass(element, cls) { + return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; + } + + // Better than a stylesheet dependency + function addStyleSheet() { + if (document.getElementById("textFitStyleSheet")) return; + var style = [ + ".textFitAlignVert{", + "position: absolute;", + "top: 0; right: 0; bottom: 0; left: 0;", + "margin: auto;", + "display: flex;", + "justify-content: center;", + "flex-direction: column;", + "}", + ".textFitAlignVertFlex{", + "display: flex;", + "}", + ".textFitAlignVertFlex .textFitAlignVert{", + "position: static;", + "}",].join(""); + + var css = document.createElement("style"); + css.type = "text/css"; + css.id = "textFitStyleSheet"; + css.innerHTML = style; + document.body.appendChild(css); + } +})); diff --git a/kit/style.css b/kit/style.css index d512f2e..6b4e7c4 100644 --- a/kit/style.css +++ b/kit/style.css @@ -118,7 +118,7 @@ dfn { */ h1 { margin: .67em 0; - font-size: 2em; + /* font-size: 2em; */ } /** @@ -969,9 +969,9 @@ body.page-theme-color-quaternary .color-page-theme-contrast { h1 { position: relative; margin: 0; - font-size: 3.61111rem; + /*font-size: 3.61111rem; line-height: 3.88889rem; - letter-spacing: .8px; + letter-spacing: .8px; */ } .h1::after, @@ -1190,8 +1190,8 @@ body.page-theme-color-quaternary h2::after { @media (max-width: 960px) { .h1, h1 { - font-size: 2.66667rem; - line-height: 3.11111rem; + /* font-size: 2.66667rem; + line-height: 3.11111rem; */ } .h1::after, h1::after { diff --git a/kit/template-parts/content-page.php b/kit/template-parts/content-page.php index d09a0a7..322e4ba 100644 --- a/kit/template-parts/content-page.php +++ b/kit/template-parts/content-page.php @@ -27,7 +27,10 @@ $kit_category_url = get_category_link( $kit_categories[0]->term_id ); - ', '' ); ?> + +

+ ', '' ); ?> +