diff --git a/src/FontPicker.js b/src/FontPicker.js index e574fd9..0474e27 100755 --- a/src/FontPicker.js +++ b/src/FontPicker.js @@ -106,7 +106,7 @@ } } - var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n position: relative;\n display: inline-block;\n width: 200px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n margin: 0;\n padding: 0;\n}\ndiv[id^=font-picker] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 35px;\n padding: 0 10px;\n background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n height: 35px;\n list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n background: #d1d1d1;\n}"; + var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n position: relative;\n display: inline-block;\n width: 150px;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n margin: 0;\n padding: 0;\n}\ndiv[id^=font-picker] button {\n color: inherit;\n font-size: inherit;\n background: none;\n border: 0;\n outline: none;\n cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 30px;\n padding: 0 10px;\n background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n overflow: hidden;\n white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n display: block;\n width: 10px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-top-color: #000000;\n border-radius: 50%;\n -webkit-animation: spinner 0.6s linear infinite;\n animation: spinner 0.6s linear infinite;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n display: block;\n width: 0;\n height: 0;\n margin: 0 2px;\n border-top: 6px solid #000000;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n transition: transform 0.3s;\n content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n position: absolute;\n z-index: 1;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n background: #eaeaea;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n transition: 0.3s;\n -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n height: 35px;\n list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n background: #d1d1d1;\n}"; styleInject(css); function getFontId(fontFamily) { diff --git a/src/index.css b/src/index.css index 3556fb9..ede58b7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,24 +1,46 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; +} + +body { + display: flex; + font-family: Helvetica, sans-serif; + justify-content: center; + align-items: center; +} + .grid-container { display: grid; + flex: 1; + height: 100%; grid-template-columns: 15rem auto; - /* grid-gap: 10px; */ + grid-template-rows: 3rem auto; + grid-template-areas: + "sidebar header" + "sidebar main"; } .header { - padding: 10px; border: black solid 1px; + grid-area: header; } .sidebar { + padding: 1rem; border: black solid 1px; + grid-area: sidebar; } .main { + grid-area: main; display: flex; justify-content: center; align-content: center; border: red solid 1px; padding: 1rem; + overflow: auto; } #page { @@ -33,12 +55,4 @@ .grid-item { background-color: lightgray; -} - -#textDatum { - border: var(--neutral-5) solid 1px; -} - -body { - font-family: Helvetica, sans-serif; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 8d5b049..23c1d70 100644 --- a/src/index.html +++ b/src/index.html @@ -8,19 +8,19 @@ Grids -
- -
+
+ +

Page

- - + +
- - + +
-

+

Grid

- +
- +
- +
- -

+
+

Type

+ +
+ + +
+ - - -
-
diff --git a/src/render.js b/src/render.js index 84607b8..bca5ef1 100644 --- a/src/render.js +++ b/src/render.js @@ -93,4 +93,15 @@ async function renderPage() { gridItem.innerText = "Lorem ipsum" page.appendChild(gridItem) } +} + +async function measureType() { + let c = document.getElementById("measuringStick") + let ctx = c.getContext("2d") + + ctx.font = "18px Futura" + + let fM = ctx.measureText("A") // a character with the maximum height + textHeight = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent + console.log(textHeight) } \ No newline at end of file