diff --git a/creator/index.php b/creator/index.php index 6d179ea7..d7d4b28e 100644 --- a/creator/index.php +++ b/creator/index.php @@ -198,6 +198,7 @@ include('../globalHTML/header-1.php');
{right#}
Moves the text # pixels right
{shadow#}
Changes the shadow distance to #
{shadowcolor#}
Changes the shadow color to #
+
{kerning#}
Changes the kerning (letter spacing) to #
Notes
For colors, you may use HTML color codes (ie 'green'), hex color codes (ie '#00FF00'), or rgb (ie 'rgb(0,255,0)'')
Mana Symbol Codes:
diff --git a/css/style-8.css b/css/style-8.css index 056dcb69..5db957f1 100644 --- a/css/style-8.css +++ b/css/style-8.css @@ -216,6 +216,12 @@ a.underline { .hidden { display: none; } +.fake-hidden { + opacity: 0; + position: absolute; + top: -100%; + left: -100%; +} .margin-bottom { margin-bottom: 0.5rem; } diff --git a/js/creator-19.js b/js/creator-19.js index bc9c0a2c..e08ad005 100644 --- a/js/creator-19.js +++ b/js/creator-19.js @@ -109,11 +109,14 @@ function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX) } window[name + 'Canvas'].width = width; window[name + 'Canvas'].height = height; - // var label = document.createElement('p'); - // label.innerHTML = name; - // window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;'; - // document.body.appendChild(window[name + 'Canvas']); - // document.body.appendChild(label); + if (name == 'line') { //force true to view all canvases + window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;'; + const label = document.createElement('div'); + label.innerHTML = name + '
If you can see this and don\'t want to, please clear you cache.'; + label.appendChild(window[name + 'Canvas']); + label.classList = 'fake-hidden'; //Comment this out to view canvases + document.body.appendChild(label); + } } //create main canvases sizeCanvas('card'); @@ -715,6 +718,10 @@ function writeText(textObject, targetContext) { //Finish prepping canvases paragraphContext.clearRect(0, 0, paragraphCanvas.width, paragraphCanvas.height); lineContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height); + lineCanvas.style.letterSpacing = textObject.kerning || '0px'; + if (textFont == 'goudymedieval') { + lineCanvas.style.letterSpacing = '3.5px'; + } lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension; lineContext.fillStyle = textColor; lineContext.shadowColor = textShadowColor; @@ -850,6 +857,9 @@ function writeText(textObject, targetContext) { manaSymbolColor = possibleCode.replace('manacolor', '') || 'white'; } else if (possibleCode.includes('fixtextalign')) { textAlign = realTextAlign; + } else if (possibleCode.includes('kerning')) { + lineCanvas.style.letterSpacing = possibleCode.replace('kerning', '') + 'px'; + lineContext.font = lineContext.font; //necessary for the letterspacing update to be recognized } else if (findManaSymbolIndex(possibleCode.replace('/', '')) > -1 || findManaSymbolIndex(possibleCode.replace('/', '').split('').reverse().join('')) > -1) { possibleCode = possibleCode.replace('/', '') var manaSymbol;