Show sample of font while tagging

diff --git a/tagger2/TagsByFont.js b/tagger2/TagsByFont.js
index 22d5c67eae9bd6db8f91691e7b948b901d6a92fc..49e8355016e320d91103d97b8847f77f40c812c7 100644 (file)
--- a/tagger2/TagsByFont.js
+++ b/tagger2/TagsByFont.js
@@ -28,6 +28,10 @@ export default {
           {{ tag }}
         </option>
       </select>
+      <p :style="{ fontFamily: font }" contenteditable="true" class="sample">
+        Grumpy wizards make toxic brew for the evil Queen and Jack.
+      </p>
+
       <ul>
         <li v-for="tag in filteredTags" :key="tag.tagName + tag.family.name + tag.score">
           {{ tag.tagName }}

diff --git a/tagger2/style.css b/tagger2/style.css
index c49be1b50ca77ba3294e0fe54c589a990b61f6ee..8333bfd039127aa0690deb97798e4650ed9932bb 100644 (file)
--- a/tagger2/style.css
+++ b/tagger2/style.css
@@ -14,4 +14,6 @@ body {
 .tag-score { padding-left: 20px; color: #888; }
 
 .frame { margin: 5px; padding: 5px; border: 1px solid black; }
-.panel { margin: 5px; padding: 5px; }
\ No newline at end of file
+.panel { margin: 5px; padding: 5px; }
+
+.sample { font-size: 25pt; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; }
\ No newline at end of file