From eebfe0702c8621612500c244898a79fed8398a7b Mon Sep 17 00:00:00 2001 From: Shaun Regenbaum Date: Thu, 28 Jan 2021 13:35:32 -0500 Subject: [PATCH 1/5] changed spacerHeights object to control each start spacer individually --- examples/edgeCase.html | 27 +++++++++++++++++++++++++++ src/calculate-spacers.js | 21 ++++++++++++++++++--- src/renderer.js | 4 +++- 3 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 examples/edgeCase.html diff --git a/examples/edgeCase.html b/examples/edgeCase.html new file mode 100644 index 0000000..cafef64 --- /dev/null +++ b/examples/edgeCase.html @@ -0,0 +1,27 @@ + + + + + + Daf Renderer Example 2 + + +
+ + + + + + \ No newline at end of file diff --git a/src/calculate-spacers.js b/src/calculate-spacers.js index 5077265..c400036 100644 --- a/src/calculate-spacers.js +++ b/src/calculate-spacers.js @@ -101,17 +101,32 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { //First we need to check we have enough commentary to fill the first four lines if (inner.height <= 0 && outer.height <= 0){ - console.error("Not Enough Commentary"); - return Error("Not enough commentary"); + console.error("No Commentary"); + return Error("No Commentary"); }; const spacerHeights = { - start: 4 * parsedOptions.lineHeight.side, // For Tzurat Hadaf this will always be the same + startInner: 4 * parsedOptions.lineHeight.side, // For Tzurat Hadaf, the default is four lines + startOuter: 4 * parsedOptions.lineHeight.side, + startMain: 4 * parsedOptions.lineHeight.side, inner: null, outer: null, end: 0, }; + // This is a case that we have to decice what to do with, when there is not enough commentary on both sides to fill the lines. + if (inner.height <= spacerHeights.start && outer.height <= spacerHeights.start) { + console.error("Not Enough Commentary to Fill Four Lines"); + return Error("Not Enough Commentary"); + }; + + // We are going to deal with our first edge case when there is either only one commentary + // Or where there is enough of one commentary, but not four lines of the other. + if (inner.height <= spacerHeights.start || outer.height <= spacerHeights.start) { + if (inner.height <= spacerHeights.start) { + spacerHeights.heights + } + }; //If Double=Wrap if (perHeight[0].name === "main"){ console.log("Double-Wrap"); diff --git a/src/renderer.js b/src/renderer.js index 55b9e0a..ea4ca05 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -74,7 +74,9 @@ export default function (el, options = defaultOptions) { return { containers, spacerHeights: { - start: 0, + startInner: 0, + startOuter: 0, + startMain: 0, inner: 0, outer: 0, end: 0 From 3f968b605a4b357fa0f1fd89556483caa097e270 Mon Sep 17 00:00:00 2001 From: Shaun Regenbaum Date: Thu, 28 Jan 2021 18:43:16 -0500 Subject: [PATCH 2/5] Fixed all the exceptions --- dist/daf-renderer.esm.js | 91 +++++++++++++++++++++++++++++----------- dist/daf-renderer.umd.js | 91 +++++++++++++++++++++++++++++----------- examples/edgeCase.html | 6 ++- examples/example1.html | 4 +- src/calculate-spacers.js | 55 +++++++++++++----------- src/options.js | 3 ++ src/renderer.js | 7 ++-- src/style-manager.js | 21 ++++++++++ src/styles.css | 76 ++++++++++++++++++++++++++------- 9 files changed, 257 insertions(+), 97 deletions(-) diff --git a/dist/daf-renderer.esm.js b/dist/daf-renderer.esm.js index 8641f35..23746e6 100644 --- a/dist/daf-renderer.esm.js +++ b/dist/daf-renderer.esm.js @@ -5,12 +5,15 @@ const defaultOptions = { vertical: "10px", horizontal: "16px", }, + innerPadding: "4px", + outerPadding: "4px", halfway: "50%", fontFamily: { inner: "Rashi", outer: "Rashi", main: "Vilna" }, + direction: "rtl", fontSize: { main: "15px", side: "10.5px" @@ -77,12 +80,6 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { const topWidth = Number(parsedOptions.width * parsedOptions.halfway) - parsedOptions.padding.horizontal; //each commentary top const sideWidth = Number(parsedOptions.width * (1 - parsedOptions.mainWidth)/2); //each commentary widths, dont include padding, sokeep it constant - // These values are unique to the font you are using: - // If you change fonts, you may have to modify these numbers, but the value should always be close to 1. - const innerModifier = 1; // Rashi font sometimes causes a percentage difference error 113% when it comes to browser rendering - const outerModifier = 1; - const mainModifier = 1; // Vilna font sometimes causes a percentage difference error of 95% when it comes to browser rendering - // We could probably put this somewhere else, it was meant to be a place for all the padding corrections, // but there turned out to only be one const paddingAreas = { @@ -90,14 +87,16 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { horizontalSide: sideWidth * parsedOptions.padding.vertical, }; - const adjustCommentaryArea = (area, lineHeight) => area - (4 * lineHeight * topWidth); //remove area of the top 4 lines + + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + + const main = { name: "main", width: midWidth, text: mainText, lineHeight: parsedOptions.lineHeight.main, - area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy) - * mainModifier, + area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy), length: null, height: null, }; @@ -106,11 +105,8 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { width: sideWidth, text: outerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( - getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * outerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + area: getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) + - topArea(parsedOptions.lineHeight.side), length: null, height: null, }; @@ -119,17 +115,17 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { width: sideWidth, text: innerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( + area: getAreaOfText(innerText, parsedOptions.fontFamily.inner, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * innerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + - topArea(parsedOptions.lineHeight.side), length: null, height: null, }; const texts = [main, outer, inner]; - texts.forEach (text => text.height = text.area / text.width); + texts.forEach(text => text.height = text.area / text.width); + texts.forEach(text => text.unadjustedArea = text.area + topArea(parsedOptions.lineHeight.side)); + texts.forEach(text => text.unadjustedHeight = text.unadjustedArea / text.width); const perHeight = Array.from(texts).sort( (a,b) => a.height - b.height); @@ -144,16 +140,41 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { //First we need to check we have enough commentary to fill the first four lines if (inner.height <= 0 && outer.height <= 0){ - console.error("Not Enough Commentary"); - return Error("Not enough commentary"); + console.error("No Commentary"); + return Error("No Commentary"); } const spacerHeights = { - start: 4 * parsedOptions.lineHeight.side, // For Tzurat Hadaf this will always be the same + start: 4 * parsedOptions.lineHeight.side, inner: null, outer: null, end: 0, }; + console.log(inner.height, inner.unadjustedHeight, outer.height, outer.unadjustedHeight, spacerHeights.start); + // This is a case that we have to decice what to do with, when there is not enough commentary on both sides to fill the lines. + if (inner.height <= spacerHeights.start && outer.height <= spacerHeights.start) { + console.error("Not Enough Commentary to Fill Four Lines"); + return Error("Not Enough Commentary"); + } + // We are going to deal with our first edge case when there is either only one commentary + // Or where there is enough of one commentary, but not four lines of the other. + if (inner.unadjustedHeight <= spacerHeights.start || outer.unadjustedHeight <= spacerHeights.start) { + if (inner.unadjustedHeight <= spacerHeights.start) { + spacerHeights.inner = inner.unadjustedHeight; + + spacerHeights.outer = (outer.unadjustedArea - parsedOptions.width*4*parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + if (outer.unadjustedHeight <= spacerHeights.start) { + spacerHeights.outer = outer.unadjustedHeight; + + spacerHeights.inner = (inner.unadjustedArea - parsedOptions.width * 4 * parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + else { + return Error("Inner Spacer Error"); + } + } //If Double=Wrap if (perHeight[0].name === "main"){ console.log("Double-Wrap"); @@ -219,7 +240,7 @@ function styleInject(css, ref) { } } -var css_248z = "/*Keep this as the first rule in the file*/\n.styles_dafRoot__1QUlM {\n --contentWidth: 0px;\n --padding-horizontal: 0px;\n --padding-vertical: 0px;\n --halfway: 50%;\n\n --fontFamily-inner: \"Rashi\";\n --fontFamily-outer: \"Tosafot\";\n --fontFamily-main: \"Vilna\";\n\n --fontSize-main: 0px;\n --fontSize-side: 0px;\n\n --lineHeight-main: 0px;\n --lineHeight-side: 0px;\n\n --mainMargin-start: 50%;\n --sidePercent: calc(calc(100% - var(--mainMargin-start))/2);\n --remainderPercent: calc(100% - var(--sidePercent));\n\n --innerFloat: left;\n --outerFloat: right;\n\n --spacerHeights-start: 0px;\n --spacerHeights-outer: 0px;\n --spacerHeights-inner: 0px;\n --spacerHeights-end: 0px;\n\n}\n\n/*Containers*/\n.styles_dafRoot__1QUlM, .styles_outer__abXQX, .styles_inner__x-amJ, .styles_main__BHTRd {\n position: absolute;\n width: var(--contentWidth);\n pointer-events: none;\n box-sizing: content-box;\n}\n\n/*Float changes with amud*/\n.styles_inner__x-amJ .styles_spacer__2T7TS, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY{\n float: var(--innerFloat);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi{\n float: var(--outerFloat);\n}\n\n\n/*Spacer widths determined by options*/\n.styles_inner__x-amJ .styles_spacer__2T7TS, .styles_outer__abXQX .styles_spacer__2T7TS {\n width: var(--halfway);\n}\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n width: var(--remainderPercent);\n}\n\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--contentWidth);\n}\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n width: var(--sidePercent);\n}\n\n/*Spacer heights determined by algorithm*/\n.styles_spacer__2T7TS.styles_start__AwkfY {\n height: var(--spacerHeights-start);\n}\n\n.styles_spacer__2T7TS.styles_end__2wr6A {\n height: var(--spacerHeights-end);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n height: var(--spacerHeights-inner);\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n height: var(--spacerHeights-outer);\n}\n\n/*Margins!*/\n.styles_spacer__2T7TS.styles_start__AwkfY, .styles_spacer__2T7TS.styles_end__2wr6A, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-left: calc(0.5 * var(--padding-horizontal));\n margin-right: calc(0.5 * var(--padding-horizontal));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_text__1_7-z {\n margin-top: var(--padding-vertical);\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-bottom: calc(2 * var(--padding-vertical));\n}\n\n\n/*Text*/\n.styles_text__1_7-z {\n direction: rtl;\n text-align: justify;\n}\n\n.styles_text__1_7-z span {\n pointer-events: auto;\n}\n\n.styles_main__BHTRd .styles_text__1_7-z {\n font-family: var(--fontFamily-main);\n font-size: var(--fontSize-main);\n line-height: var(--lineHeight-main);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z, .styles_outer__abXQX .styles_text__1_7-z {\n font-size: var(--fontSize-side);\n line-height: var(--lineHeight-side);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z {\n font-family: var(--fontFamily-inner);\n}\n\n.styles_outer__abXQX .styles_text__1_7-z {\n font-family: var(--fontFamily-outer);\n}\n"; +var css_248z = "/*Keep this as the first rule in the file*/\n.styles_dafRoot__1QUlM {\n --contentWidth: 0px;\n --padding-horizontal: 0px;\n --padding-vertical: 0px;\n --halfway: 50%;\n\n --fontFamily-inner: \"Rashi\";\n --fontFamily-outer: \"Tosafot\";\n --fontFamily-main: \"Vilna\";\n --direction: \"rtl\"\n\n --fontSize-main: 0px;\n --fontSize-side: 0px;\n\n --lineHeight-main: 0px;\n --lineHeight-side: 0px;\n\n --mainMargin-start: 50%;\n --sidePercent: calc(calc(100% - var(--mainMargin-start)) / 2);\n --remainderPercent: calc(100% - var(--sidePercent));\n\n --innerFloat: left;\n --outerFloat: right;\n\n --exception1: 0;\n --exception2: 0;\n --innerStart: 50%;\n --innerPadding: 0px;\n --outerStart: 50%;\n --outerPadding: 0px;\n\n --spacerHeights-start: 0px;\n --spacerHeights-outer: 0px;\n --spacerHeights-inner: 0px;\n --spacerHeights-end: 0px;\n}\n\n/*Containers*/\n.styles_dafRoot__1QUlM,\n.styles_outer__abXQX,\n.styles_inner__x-amJ,\n.styles_main__BHTRd {\n position: absolute;\n width: var(--contentWidth);\n pointer-events: none;\n box-sizing: content-box;\n}\n\n/*Float changes with amud*/\n.styles_inner__x-amJ .styles_spacer__2T7TS,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n float: var(--innerFloat);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n float: var(--outerFloat);\n}\n\n/*Spacer widths determined by options*/\n.styles_inner__x-amJ .styles_spacer__2T7TS,\n.styles_outer__abXQX .styles_spacer__2T7TS {\n width: var(--halfway);\n}\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n width: var(--remainderPercent);\n}\n\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--contentWidth);\n}\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n width: var(--sidePercent);\n}\n\n/*Spacer heights determined by algorithm*/\n.styles_spacer__2T7TS.styles_start__AwkfY {\n height: var(--spacerHeights-start);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--innerStart);\n margin-left: var(--innerPadding);\n margin-right: var(--innerPadding);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--outerStart);\n margin-left: var(--outerPadding);\n margin-right: var(--outerPadding);\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n clear: both;\n}\n\n.styles_spacer__2T7TS.styles_end__2wr6A {\n height: var(--spacerHeights-end);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n height: var(--spacerHeights-inner);\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n height: var(--spacerHeights-outer);\n}\n\n/*Margins!*/\n.styles_spacer__2T7TS.styles_start__AwkfY,\n.styles_spacer__2T7TS.styles_end__2wr6A,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-left: calc(0.5 * var(--padding-horizontal));\n margin-right: calc(0.5 * var(--padding-horizontal));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_text__1_7-z {\n margin-top: var(--padding-vertical);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_start__AwkfY{\n margin-bottom: calc(var(--padding-vertical) * var(--exception1));\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_start__AwkfY {\n margin-bottom: calc(var(--padding-vertical) * var(--exception2));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-bottom: var(--padding-vertical);\n}\n\n/*Text*/\n.styles_text__1_7-z {\n direction: var(--direction);\n text-align: justify;\n}\n\n.styles_text__1_7-z span {\n pointer-events: auto;\n}\n\n.styles_main__BHTRd .styles_text__1_7-z {\n font-family: var(--fontFamily-main);\n font-size: var(--fontSize-main);\n line-height: var(--lineHeight-main);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z,\n.styles_outer__abXQX .styles_text__1_7-z {\n font-size: var(--fontSize-side);\n line-height: var(--lineHeight-side);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z {\n font-family: var(--fontFamily-inner);\n}\n\n.styles_outer__abXQX .styles_text__1_7-z {\n font-family: var(--fontFamily-outer);\n}\n"; var classes = {"dafRoot":"styles_dafRoot__1QUlM","outer":"styles_outer__abXQX","inner":"styles_inner__x-amJ","main":"styles_main__BHTRd","spacer":"styles_spacer__2T7TS","outerMid":"styles_outerMid__2WtcY","innerMid":"styles_innerMid__27MCi","mid":"styles_mid__dcgUr","start":"styles_start__AwkfY","end":"styles_end__2wr6A","text":"styles_text__1_7-z"}; styleInject(css_248z); @@ -305,6 +326,27 @@ var styleManager = { innerFloat: amudB ? "right" : "left", outerFloat: amudB ? "left" : "right" }); + }, + manageExceptions(spacerHeights) { + if (spacerHeights.inner < spacerHeights.start) { + setVars({ + exception1: "1", + innerStart: "100%", + outerStart: "0%", + innerPadding: "0px", + outerPadding: "0px", + }); + } + if (spacerHeights.outer < spacerHeights.start) { + setVars({ + exception2: "1", + outerStart: "0%", + innerStart: "100%", + innerPadding: "0px", + outerPadding: "0px" + + }); + } } }; @@ -391,8 +433,9 @@ function renderer (el, options = defaultOptions) { styleManager.updateIsAmudB(amud == "b"); } this.spacerHeights = calculateSpacers(main, inner, outer, clonedOptions, containers.dummy); - console.dir(this.spacerHeights); styleManager.updateSpacersVars(this.spacerHeights); + styleManager.manageExceptions(this.spacerHeights); + console.log(this.spacerHeights); textSpans.main.innerHTML = main; textSpans.inner.innerHTML = inner; textSpans.outer.innerHTML = outer; diff --git a/dist/daf-renderer.umd.js b/dist/daf-renderer.umd.js index ead9f89..2259771 100644 --- a/dist/daf-renderer.umd.js +++ b/dist/daf-renderer.umd.js @@ -11,12 +11,15 @@ vertical: "10px", horizontal: "16px", }, + innerPadding: "4px", + outerPadding: "4px", halfway: "50%", fontFamily: { inner: "Rashi", outer: "Rashi", main: "Vilna" }, + direction: "rtl", fontSize: { main: "15px", side: "10.5px" @@ -83,12 +86,6 @@ const topWidth = Number(parsedOptions.width * parsedOptions.halfway) - parsedOptions.padding.horizontal; //each commentary top const sideWidth = Number(parsedOptions.width * (1 - parsedOptions.mainWidth)/2); //each commentary widths, dont include padding, sokeep it constant - // These values are unique to the font you are using: - // If you change fonts, you may have to modify these numbers, but the value should always be close to 1. - const innerModifier = 1; // Rashi font sometimes causes a percentage difference error 113% when it comes to browser rendering - const outerModifier = 1; - const mainModifier = 1; // Vilna font sometimes causes a percentage difference error of 95% when it comes to browser rendering - // We could probably put this somewhere else, it was meant to be a place for all the padding corrections, // but there turned out to only be one const paddingAreas = { @@ -96,14 +93,16 @@ horizontalSide: sideWidth * parsedOptions.padding.vertical, }; - const adjustCommentaryArea = (area, lineHeight) => area - (4 * lineHeight * topWidth); //remove area of the top 4 lines + + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + + const main = { name: "main", width: midWidth, text: mainText, lineHeight: parsedOptions.lineHeight.main, - area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy) - * mainModifier, + area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy), length: null, height: null, }; @@ -112,11 +111,8 @@ width: sideWidth, text: outerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( - getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * outerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + area: getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) + - topArea(parsedOptions.lineHeight.side), length: null, height: null, }; @@ -125,17 +121,17 @@ width: sideWidth, text: innerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( + area: getAreaOfText(innerText, parsedOptions.fontFamily.inner, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * innerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + - topArea(parsedOptions.lineHeight.side), length: null, height: null, }; const texts = [main, outer, inner]; - texts.forEach (text => text.height = text.area / text.width); + texts.forEach(text => text.height = text.area / text.width); + texts.forEach(text => text.unadjustedArea = text.area + topArea(parsedOptions.lineHeight.side)); + texts.forEach(text => text.unadjustedHeight = text.unadjustedArea / text.width); const perHeight = Array.from(texts).sort( (a,b) => a.height - b.height); @@ -150,16 +146,41 @@ //First we need to check we have enough commentary to fill the first four lines if (inner.height <= 0 && outer.height <= 0){ - console.error("Not Enough Commentary"); - return Error("Not enough commentary"); + console.error("No Commentary"); + return Error("No Commentary"); } const spacerHeights = { - start: 4 * parsedOptions.lineHeight.side, // For Tzurat Hadaf this will always be the same + start: 4 * parsedOptions.lineHeight.side, inner: null, outer: null, end: 0, }; + console.log(inner.height, inner.unadjustedHeight, outer.height, outer.unadjustedHeight, spacerHeights.start); + // This is a case that we have to decice what to do with, when there is not enough commentary on both sides to fill the lines. + if (inner.height <= spacerHeights.start && outer.height <= spacerHeights.start) { + console.error("Not Enough Commentary to Fill Four Lines"); + return Error("Not Enough Commentary"); + } + // We are going to deal with our first edge case when there is either only one commentary + // Or where there is enough of one commentary, but not four lines of the other. + if (inner.unadjustedHeight <= spacerHeights.start || outer.unadjustedHeight <= spacerHeights.start) { + if (inner.unadjustedHeight <= spacerHeights.start) { + spacerHeights.inner = inner.unadjustedHeight; + + spacerHeights.outer = (outer.unadjustedArea - parsedOptions.width*4*parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + if (outer.unadjustedHeight <= spacerHeights.start) { + spacerHeights.outer = outer.unadjustedHeight; + + spacerHeights.inner = (inner.unadjustedArea - parsedOptions.width * 4 * parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + else { + return Error("Inner Spacer Error"); + } + } //If Double=Wrap if (perHeight[0].name === "main"){ console.log("Double-Wrap"); @@ -225,7 +246,7 @@ } } - var css_248z = "/*Keep this as the first rule in the file*/\n.styles_dafRoot__1QUlM {\n --contentWidth: 0px;\n --padding-horizontal: 0px;\n --padding-vertical: 0px;\n --halfway: 50%;\n\n --fontFamily-inner: \"Rashi\";\n --fontFamily-outer: \"Tosafot\";\n --fontFamily-main: \"Vilna\";\n\n --fontSize-main: 0px;\n --fontSize-side: 0px;\n\n --lineHeight-main: 0px;\n --lineHeight-side: 0px;\n\n --mainMargin-start: 50%;\n --sidePercent: calc(calc(100% - var(--mainMargin-start))/2);\n --remainderPercent: calc(100% - var(--sidePercent));\n\n --innerFloat: left;\n --outerFloat: right;\n\n --spacerHeights-start: 0px;\n --spacerHeights-outer: 0px;\n --spacerHeights-inner: 0px;\n --spacerHeights-end: 0px;\n\n}\n\n/*Containers*/\n.styles_dafRoot__1QUlM, .styles_outer__abXQX, .styles_inner__x-amJ, .styles_main__BHTRd {\n position: absolute;\n width: var(--contentWidth);\n pointer-events: none;\n box-sizing: content-box;\n}\n\n/*Float changes with amud*/\n.styles_inner__x-amJ .styles_spacer__2T7TS, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY{\n float: var(--innerFloat);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi{\n float: var(--outerFloat);\n}\n\n\n/*Spacer widths determined by options*/\n.styles_inner__x-amJ .styles_spacer__2T7TS, .styles_outer__abXQX .styles_spacer__2T7TS {\n width: var(--halfway);\n}\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n width: var(--remainderPercent);\n}\n\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--contentWidth);\n}\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n width: var(--sidePercent);\n}\n\n/*Spacer heights determined by algorithm*/\n.styles_spacer__2T7TS.styles_start__AwkfY {\n height: var(--spacerHeights-start);\n}\n\n.styles_spacer__2T7TS.styles_end__2wr6A {\n height: var(--spacerHeights-end);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n height: var(--spacerHeights-inner);\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n height: var(--spacerHeights-outer);\n}\n\n/*Margins!*/\n.styles_spacer__2T7TS.styles_start__AwkfY, .styles_spacer__2T7TS.styles_end__2wr6A, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-left: calc(0.5 * var(--padding-horizontal));\n margin-right: calc(0.5 * var(--padding-horizontal));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_text__1_7-z {\n margin-top: var(--padding-vertical);\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr, .styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi, .styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-bottom: calc(2 * var(--padding-vertical));\n}\n\n\n/*Text*/\n.styles_text__1_7-z {\n direction: rtl;\n text-align: justify;\n}\n\n.styles_text__1_7-z span {\n pointer-events: auto;\n}\n\n.styles_main__BHTRd .styles_text__1_7-z {\n font-family: var(--fontFamily-main);\n font-size: var(--fontSize-main);\n line-height: var(--lineHeight-main);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z, .styles_outer__abXQX .styles_text__1_7-z {\n font-size: var(--fontSize-side);\n line-height: var(--lineHeight-side);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z {\n font-family: var(--fontFamily-inner);\n}\n\n.styles_outer__abXQX .styles_text__1_7-z {\n font-family: var(--fontFamily-outer);\n}\n"; + var css_248z = "/*Keep this as the first rule in the file*/\n.styles_dafRoot__1QUlM {\n --contentWidth: 0px;\n --padding-horizontal: 0px;\n --padding-vertical: 0px;\n --halfway: 50%;\n\n --fontFamily-inner: \"Rashi\";\n --fontFamily-outer: \"Tosafot\";\n --fontFamily-main: \"Vilna\";\n --direction: \"rtl\"\n\n --fontSize-main: 0px;\n --fontSize-side: 0px;\n\n --lineHeight-main: 0px;\n --lineHeight-side: 0px;\n\n --mainMargin-start: 50%;\n --sidePercent: calc(calc(100% - var(--mainMargin-start)) / 2);\n --remainderPercent: calc(100% - var(--sidePercent));\n\n --innerFloat: left;\n --outerFloat: right;\n\n --exception1: 0;\n --exception2: 0;\n --innerStart: 50%;\n --innerPadding: 0px;\n --outerStart: 50%;\n --outerPadding: 0px;\n\n --spacerHeights-start: 0px;\n --spacerHeights-outer: 0px;\n --spacerHeights-inner: 0px;\n --spacerHeights-end: 0px;\n}\n\n/*Containers*/\n.styles_dafRoot__1QUlM,\n.styles_outer__abXQX,\n.styles_inner__x-amJ,\n.styles_main__BHTRd {\n position: absolute;\n width: var(--contentWidth);\n pointer-events: none;\n box-sizing: content-box;\n}\n\n/*Float changes with amud*/\n.styles_inner__x-amJ .styles_spacer__2T7TS,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n float: var(--innerFloat);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n float: var(--outerFloat);\n}\n\n/*Spacer widths determined by options*/\n.styles_inner__x-amJ .styles_spacer__2T7TS,\n.styles_outer__abXQX .styles_spacer__2T7TS {\n width: var(--halfway);\n}\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n width: var(--remainderPercent);\n}\n\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--contentWidth);\n}\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n width: var(--sidePercent);\n}\n\n/*Spacer heights determined by algorithm*/\n.styles_spacer__2T7TS.styles_start__AwkfY {\n height: var(--spacerHeights-start);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--innerStart);\n margin-left: var(--innerPadding);\n margin-right: var(--innerPadding);\n}\n\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_start__AwkfY {\n width: var(--outerStart);\n margin-left: var(--outerPadding);\n margin-right: var(--outerPadding);\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr {\n clear: both;\n}\n\n.styles_spacer__2T7TS.styles_end__2wr6A {\n height: var(--spacerHeights-end);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi {\n height: var(--spacerHeights-inner);\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n height: var(--spacerHeights-outer);\n}\n\n/*Margins!*/\n.styles_spacer__2T7TS.styles_start__AwkfY,\n.styles_spacer__2T7TS.styles_end__2wr6A,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-left: calc(0.5 * var(--padding-horizontal));\n margin-right: calc(0.5 * var(--padding-horizontal));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_text__1_7-z {\n margin-top: var(--padding-vertical);\n}\n\n.styles_inner__x-amJ .styles_spacer__2T7TS.styles_start__AwkfY{\n margin-bottom: calc(var(--padding-vertical) * var(--exception1));\n}\n.styles_outer__abXQX .styles_spacer__2T7TS.styles_start__AwkfY {\n margin-bottom: calc(var(--padding-vertical) * var(--exception2));\n}\n\n.styles_spacer__2T7TS.styles_mid__dcgUr,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_innerMid__27MCi,\n.styles_main__BHTRd .styles_spacer__2T7TS.styles_outerMid__2WtcY {\n margin-bottom: var(--padding-vertical);\n}\n\n/*Text*/\n.styles_text__1_7-z {\n direction: var(--direction);\n text-align: justify;\n}\n\n.styles_text__1_7-z span {\n pointer-events: auto;\n}\n\n.styles_main__BHTRd .styles_text__1_7-z {\n font-family: var(--fontFamily-main);\n font-size: var(--fontSize-main);\n line-height: var(--lineHeight-main);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z,\n.styles_outer__abXQX .styles_text__1_7-z {\n font-size: var(--fontSize-side);\n line-height: var(--lineHeight-side);\n}\n\n.styles_inner__x-amJ .styles_text__1_7-z {\n font-family: var(--fontFamily-inner);\n}\n\n.styles_outer__abXQX .styles_text__1_7-z {\n font-family: var(--fontFamily-outer);\n}\n"; var classes = {"dafRoot":"styles_dafRoot__1QUlM","outer":"styles_outer__abXQX","inner":"styles_inner__x-amJ","main":"styles_main__BHTRd","spacer":"styles_spacer__2T7TS","outerMid":"styles_outerMid__2WtcY","innerMid":"styles_innerMid__27MCi","mid":"styles_mid__dcgUr","start":"styles_start__AwkfY","end":"styles_end__2wr6A","text":"styles_text__1_7-z"}; styleInject(css_248z); @@ -311,6 +332,27 @@ innerFloat: amudB ? "right" : "left", outerFloat: amudB ? "left" : "right" }); + }, + manageExceptions(spacerHeights) { + if (spacerHeights.inner < spacerHeights.start) { + setVars({ + exception1: "1", + innerStart: "100%", + outerStart: "0%", + innerPadding: "0px", + outerPadding: "0px", + }); + } + if (spacerHeights.outer < spacerHeights.start) { + setVars({ + exception2: "1", + outerStart: "0%", + innerStart: "100%", + innerPadding: "0px", + outerPadding: "0px" + + }); + } } }; @@ -397,8 +439,9 @@ styleManager.updateIsAmudB(amud == "b"); } this.spacerHeights = calculateSpacers(main, inner, outer, clonedOptions, containers.dummy); - console.dir(this.spacerHeights); styleManager.updateSpacersVars(this.spacerHeights); + styleManager.manageExceptions(this.spacerHeights); + console.log(this.spacerHeights); textSpans.main.innerHTML = main; textSpans.inner.innerHTML = inner; textSpans.outer.innerHTML = outer; diff --git a/examples/edgeCase.html b/examples/edgeCase.html index cafef64..ea04fc4 100644 --- a/examples/edgeCase.html +++ b/examples/edgeCase.html @@ -11,12 +11,14 @@ diff --git a/src/calculate-spacers.js b/src/calculate-spacers.js index c400036..799a08c 100644 --- a/src/calculate-spacers.js +++ b/src/calculate-spacers.js @@ -34,12 +34,6 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { const topWidth = Number(parsedOptions.width * parsedOptions.halfway) - parsedOptions.padding.horizontal; //each commentary top const sideWidth = Number(parsedOptions.width * (1 - parsedOptions.mainWidth)/2) //each commentary widths, dont include padding, sokeep it constant - // These values are unique to the font you are using: - // If you change fonts, you may have to modify these numbers, but the value should always be close to 1. - const innerModifier = 1 // Rashi font sometimes causes a percentage difference error 113% when it comes to browser rendering - const outerModifier = 1 - const mainModifier = 1 // Vilna font sometimes causes a percentage difference error of 95% when it comes to browser rendering - // We could probably put this somewhere else, it was meant to be a place for all the padding corrections, // but there turned out to only be one const paddingAreas = { @@ -47,14 +41,16 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { horizontalSide: sideWidth * parsedOptions.padding.vertical, } - const adjustCommentaryArea = (area, lineHeight) => area - (4 * lineHeight * topWidth); //remove area of the top 4 lines + + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + + const main = { name: "main", width: midWidth, text: mainText, lineHeight: parsedOptions.lineHeight.main, - area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy) - * mainModifier, + area: getAreaOfText(mainText, parsedOptions.fontFamily.main, parsedOptions.fontSize.main, midWidth, parsedOptions.lineHeight.main, dummy), length: null, height: null, } @@ -63,11 +59,8 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { width: sideWidth, text: outerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( - getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * outerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + area: getAreaOfText(outerText, parsedOptions.fontFamily.outer, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) + - topArea(parsedOptions.lineHeight.side), length: null, height: null, } @@ -76,17 +69,17 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { width: sideWidth, text: innerText, lineHeight: parsedOptions.lineHeight.side, - area: adjustCommentaryArea( + area: getAreaOfText(innerText, parsedOptions.fontFamily.inner, parsedOptions.fontSize.side, sideWidth, parsedOptions.lineHeight.side, dummy) - * innerModifier, - parsedOptions.lineHeight.side - ) - paddingAreas.horizontalSide, + - topArea(parsedOptions.lineHeight.side), length: null, height: null, } const texts = [main, outer, inner]; - texts.forEach (text => text.height = text.area / text.width); + texts.forEach(text => text.height = text.area / text.width); + texts.forEach(text => text.unadjustedArea = text.area + topArea(parsedOptions.lineHeight.side)); + texts.forEach(text => text.unadjustedHeight = text.unadjustedArea / text.width); const perHeight = Array.from(texts).sort( (a,b) => a.height - b.height); @@ -106,14 +99,13 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { }; const spacerHeights = { - startInner: 4 * parsedOptions.lineHeight.side, // For Tzurat Hadaf, the default is four lines - startOuter: 4 * parsedOptions.lineHeight.side, - startMain: 4 * parsedOptions.lineHeight.side, + start: 4 * parsedOptions.lineHeight.side, inner: null, outer: null, end: 0, }; + console.log(inner.height, inner.unadjustedHeight, outer.height, outer.unadjustedHeight, spacerHeights.start); // This is a case that we have to decice what to do with, when there is not enough commentary on both sides to fill the lines. if (inner.height <= spacerHeights.start && outer.height <= spacerHeights.start) { console.error("Not Enough Commentary to Fill Four Lines"); @@ -122,11 +114,24 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { // We are going to deal with our first edge case when there is either only one commentary // Or where there is enough of one commentary, but not four lines of the other. - if (inner.height <= spacerHeights.start || outer.height <= spacerHeights.start) { - if (inner.height <= spacerHeights.start) { - spacerHeights.heights + if (inner.unadjustedHeight <= spacerHeights.start || outer.unadjustedHeight <= spacerHeights.start) { + if (inner.unadjustedHeight <= spacerHeights.start) { + spacerHeights.inner = inner.unadjustedHeight; + + spacerHeights.outer = (outer.unadjustedArea - parsedOptions.width*4*parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + if (outer.unadjustedHeight <= spacerHeights.start) { + spacerHeights.outer = outer.unadjustedHeight; + + spacerHeights.inner = (inner.unadjustedArea - parsedOptions.width * 4 * parsedOptions.lineHeight.side) / sideWidth; + return spacerHeights; + } + else { + return Error("Inner Spacer Error"); } }; + //If Double=Wrap if (perHeight[0].name === "main"){ console.log("Double-Wrap"); diff --git a/src/options.js b/src/options.js index b475173..67daa0f 100644 --- a/src/options.js +++ b/src/options.js @@ -5,12 +5,15 @@ const defaultOptions = { vertical: "10px", horizontal: "16px", }, + innerPadding: "4px", + outerPadding: "4px", halfway: "50%", fontFamily: { inner: "Rashi", outer: "Rashi", main: "Vilna" }, + direction: "rtl", fontSize: { main: "15px", side: "10.5px" diff --git a/src/renderer.js b/src/renderer.js index ea4ca05..7416b7e 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -74,9 +74,7 @@ export default function (el, options = defaultOptions) { return { containers, spacerHeights: { - startInner: 0, - startOuter: 0, - startMain: 0, + start: 0, inner: 0, outer: 0, end: 0 @@ -88,8 +86,9 @@ export default function (el, options = defaultOptions) { styleManager.updateIsAmudB(amud == "b"); } this.spacerHeights = calculateSpacers(main, inner, outer, clonedOptions, containers.dummy); - console.dir(this.spacerHeights); styleManager.updateSpacersVars(this.spacerHeights); + styleManager.manageExceptions(this.spacerHeights); + console.log(this.spacerHeights) textSpans.main.innerHTML = main; textSpans.inner.innerHTML = inner; textSpans.outer.innerHTML = outer; diff --git a/src/style-manager.js b/src/style-manager.js index 3e7f390..9aa39ff 100644 --- a/src/style-manager.js +++ b/src/style-manager.js @@ -82,5 +82,26 @@ export default { innerFloat: amudB ? "right" : "left", outerFloat: amudB ? "left" : "right" }) + }, + manageExceptions(spacerHeights) { + if (spacerHeights.inner < spacerHeights.start) { + setVars({ + exception1: "1", + innerStart: "100%", + outerStart: "0%", + innerPadding: "0px", + outerPadding: "0px", + }) + } + if (spacerHeights.outer < spacerHeights.start) { + setVars({ + exception2: "1", + outerStart: "0%", + innerStart: "100%", + innerPadding: "0px", + outerPadding: "0px" + + }) + } } } \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 70a73eb..8e99638 100644 --- a/src/styles.css +++ b/src/styles.css @@ -8,6 +8,7 @@ --fontFamily-inner: "Rashi"; --fontFamily-outer: "Tosafot"; --fontFamily-main: "Vilna"; + --direction: "rtl" --fontSize-main: 0px; --fontSize-side: 0px; @@ -16,21 +17,30 @@ --lineHeight-side: 0px; --mainMargin-start: 50%; - --sidePercent: calc(calc(100% - var(--mainMargin-start))/2); + --sidePercent: calc(calc(100% - var(--mainMargin-start)) / 2); --remainderPercent: calc(100% - var(--sidePercent)); --innerFloat: left; --outerFloat: right; + --exception1: 0; + --exception2: 0; + --innerStart: 50%; + --innerPadding: 0px; + --outerStart: 50%; + --outerPadding: 0px; + --spacerHeights-start: 0px; --spacerHeights-outer: 0px; --spacerHeights-inner: 0px; --spacerHeights-end: 0px; - } /*Containers*/ -.dafRoot, .outer, .inner, .main { +.dafRoot, +.outer, +.inner, +.main { position: absolute; width: var(--contentWidth); pointer-events: none; @@ -38,17 +48,19 @@ } /*Float changes with amud*/ -.inner .spacer, .main .spacer.outerMid{ +.inner .spacer, +.main .spacer.outerMid { float: var(--innerFloat); } -.outer .spacer, .main .spacer.innerMid{ +.outer .spacer, +.main .spacer.innerMid { float: var(--outerFloat); } - /*Spacer widths determined by options*/ -.inner .spacer, .outer .spacer { +.inner .spacer, +.outer .spacer { width: var(--halfway); } .spacer.mid { @@ -58,7 +70,8 @@ .main .spacer.start { width: var(--contentWidth); } -.main .spacer.innerMid, .main .spacer.outerMid { +.main .spacer.innerMid, +.main .spacer.outerMid { width: var(--sidePercent); } @@ -67,35 +80,65 @@ height: var(--spacerHeights-start); } +.inner .spacer.start { + width: var(--innerStart); + margin-left: var(--innerPadding); + margin-right: var(--innerPadding); +} + +.outer .spacer.start { + width: var(--outerStart); + margin-left: var(--outerPadding); + margin-right: var(--outerPadding); +} + +.spacer.mid { + clear: both; +} + .spacer.end { height: var(--spacerHeights-end); } -.inner .spacer.mid, .main .spacer.innerMid { +.inner .spacer.mid, +.main .spacer.innerMid { height: var(--spacerHeights-inner); } -.outer .spacer.mid, .main .spacer.outerMid { +.outer .spacer.mid, +.main .spacer.outerMid { height: var(--spacerHeights-outer); } /*Margins!*/ -.spacer.start, .spacer.end, .main .spacer.innerMid, .main .spacer.outerMid { +.spacer.start, +.spacer.end, +.main .spacer.innerMid, +.main .spacer.outerMid { margin-left: calc(0.5 * var(--padding-horizontal)); margin-right: calc(0.5 * var(--padding-horizontal)); } -.spacer.mid, .main .text { +.spacer.mid, +.main .text { margin-top: var(--padding-vertical); } -.spacer.mid, .main .spacer.innerMid, .main .spacer.outerMid { - margin-bottom: calc(2 * var(--padding-vertical)); +.inner .spacer.start{ + margin-bottom: calc(var(--padding-vertical) * var(--exception1)); +} +.outer .spacer.start { + margin-bottom: calc(var(--padding-vertical) * var(--exception2)); } +.spacer.mid, +.main .spacer.innerMid, +.main .spacer.outerMid { + margin-bottom: var(--padding-vertical); +} /*Text*/ .text { - direction: rtl; + direction: var(--direction); text-align: justify; } @@ -109,7 +152,8 @@ line-height: var(--lineHeight-main); } -.inner .text, .outer .text { +.inner .text, +.outer .text { font-size: var(--fontSize-side); line-height: var(--lineHeight-side); } From c4bcfe24018c8220dfa962a4d58f65aafb59f11c Mon Sep 17 00:00:00 2001 From: Shaun Regenbaum Date: Thu, 28 Jan 2021 22:43:49 -0500 Subject: [PATCH 3/5] fixed + - --- dist/daf-renderer.esm.js | 2 +- dist/daf-renderer.umd.js | 2 +- src/calculate-spacers.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/daf-renderer.esm.js b/dist/daf-renderer.esm.js index 23746e6..9503965 100644 --- a/dist/daf-renderer.esm.js +++ b/dist/daf-renderer.esm.js @@ -88,7 +88,7 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { }; - const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) - paddingAreas.horizontalSide); //remove area of the top 4 lines const main = { diff --git a/dist/daf-renderer.umd.js b/dist/daf-renderer.umd.js index 2259771..405a887 100644 --- a/dist/daf-renderer.umd.js +++ b/dist/daf-renderer.umd.js @@ -94,7 +94,7 @@ }; - const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) - paddingAreas.horizontalSide); //remove area of the top 4 lines const main = { diff --git a/src/calculate-spacers.js b/src/calculate-spacers.js index 799a08c..afe5724 100644 --- a/src/calculate-spacers.js +++ b/src/calculate-spacers.js @@ -42,7 +42,7 @@ function calculateSpacers(mainText, innerText, outerText, options, dummy) { } - const topArea = (lineHeight) => ((4 * lineHeight * topWidth) + - paddingAreas.horizontalSide); //remove area of the top 4 lines + const topArea = (lineHeight) => ((4 * lineHeight * topWidth) - paddingAreas.horizontalSide); //remove area of the top 4 lines const main = { From 4b5a71531f8d1a89a8a6d5e635b00016ffcd2e6a Mon Sep 17 00:00:00 2001 From: Shaun Regenbaum Date: Fri, 29 Jan 2021 11:00:35 -0500 Subject: [PATCH 4/5] Reorganzied some css stuff --- src/styles.css | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/styles.css b/src/styles.css index 8e99638..7e3ace7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -80,6 +80,21 @@ height: var(--spacerHeights-start); } +.spacer.end { + height: var(--spacerHeights-end); +} + +.inner .spacer.mid, +.main .spacer.innerMid { + height: var(--spacerHeights-inner); +} +.outer .spacer.mid, +.main .spacer.outerMid { + height: var(--spacerHeights-outer); +} + +/*Settings to handle edge Cases*/ + .inner .spacer.start { width: var(--innerStart); margin-left: var(--innerPadding); @@ -92,23 +107,16 @@ margin-right: var(--outerPadding); } -.spacer.mid { - clear: both; +.inner .spacer.start{ + margin-bottom: calc(var(--padding-vertical) * var(--exception1)); } - -.spacer.end { - height: var(--spacerHeights-end); +.outer .spacer.start { + margin-bottom: calc(var(--padding-vertical) * var(--exception2)); } -.inner .spacer.mid, -.main .spacer.innerMid { - height: var(--spacerHeights-inner); -} -.outer .spacer.mid, -.main .spacer.outerMid { - height: var(--spacerHeights-outer); +.spacer.mid { + clear: both; } - /*Margins!*/ .spacer.start, .spacer.end, @@ -123,13 +131,6 @@ margin-top: var(--padding-vertical); } -.inner .spacer.start{ - margin-bottom: calc(var(--padding-vertical) * var(--exception1)); -} -.outer .spacer.start { - margin-bottom: calc(var(--padding-vertical) * var(--exception2)); -} - .spacer.mid, .main .spacer.innerMid, .main .spacer.outerMid { From 612a5b24253b2207553a2c474edf25876193b571 Mon Sep 17 00:00:00 2001 From: Shaun Regenbaum Date: Fri, 29 Jan 2021 11:02:18 -0500 Subject: [PATCH 5/5] updted edge case html example --- examples/edgeCase.html | 3 ++- src/styles.css | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/edgeCase.html b/examples/edgeCase.html index ea04fc4..9dbffb9 100644 --- a/examples/edgeCase.html +++ b/examples/edgeCase.html @@ -11,9 +11,10 @@