Skip to content

One commentary exception #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Shaun-Regenbaum merged 5 commits into from
Jan 29, 2021
Merged

One commentary exception #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eebfe07
changed spacerHeights object to control each start spacer individually
Shaun-Regenbaum Jan 28, 2021
3f968b6
Fixed all the exceptions
Shaun-Regenbaum Jan 28, 2021
c4bcfe2
fixed + -
Shaun-Regenbaum Jan 29, 2021
4b5a715
Reorganzied some css stuff
Shaun-Regenbaum Jan 29, 2021
612a5b2
updted edge case html example
Shaun-Regenbaum Jan 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 67 additions & 24 deletions dist/daf-renderer.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -77,27 +80,23 @@ 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 = {
name: "paddingAreas",
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,
};
Expand All @@ -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,
};
Expand All @@ -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);

Expand All @@ -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");
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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"

});
}
}
};

Expand Down Expand Up @@ -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;
Expand Down
Loading