🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
linefold - npm Package Compare versions
+88
-5
@@ -10,2 +10,3 @@ <!DOCTYPE html> | ||
| <body> | ||
| <ribbon><a href='https://github.com/frank-deng/linefold/'>Fork me on GitHub</a></ribbon> | ||
| <div class='inputForm' oninput='refreshCanvas()'> | ||
@@ -22,5 +23,15 @@ <div class='inputItem'> | ||
| <span translate="font">Font</span><!-- | ||
| --><input name='fontFamily' value='sans'/> | ||
| </div> | ||
| <div class='textInputTitle' translate="text">Text</div> | ||
| --><input type='text' name='fontFamily' value='sans'/> | ||
| </div><!-- | ||
| --><div class='inputItemGroup'> | ||
| <label class='inputItem checkboxItem'> | ||
| <input type='checkbox' name='fontBold'/><!-- | ||
| --><span translate="bold">Bold</span> | ||
| </label><!-- | ||
| --><label class='inputItem checkboxItem'> | ||
| <input type='checkbox' name='fontItalic'/><!-- | ||
| --><span translate="italic">Italic</span> | ||
| </label> | ||
| </div><!-- | ||
| --><div class='textInputTitle' translate="text">Text</div> | ||
| <textarea class='textInput' name='textInput' rows='10'></textarea> | ||
@@ -41,2 +52,4 @@ </div> | ||
| font:'Font', | ||
| bold:'Bold', | ||
| italic:'Italic', | ||
| text:'Text', | ||
@@ -48,4 +61,6 @@ effect:'Effect' | ||
| width:'幅', | ||
| fontSize:'フォントサイズ', | ||
| fontSize:'サイズ', | ||
| font:'フォント', | ||
| bold:'太字', | ||
| italic:'斜体', | ||
| text:'テキスト', | ||
@@ -59,2 +74,4 @@ effect:'効果' | ||
| font:'字体', | ||
| bold:'加粗', | ||
| italic:'倾斜', | ||
| text:'正文', | ||
@@ -126,2 +143,4 @@ effect:'效果' | ||
| fontFamilyInput=document.querySelector('[name=fontFamily]'), | ||
| fontBoldInput=document.querySelector('[name=fontBold]'), | ||
| fontItalicInput=document.querySelector('[name=fontItalic]'), | ||
| displayFormTitle=document.getElementById('displayFormTitle'), | ||
@@ -141,2 +160,9 @@ displayForm=document.getElementById('displayForm'); | ||
| font=fontSize+'px '+fontFamily; | ||
| if(fontItalicInput.checked){ | ||
| font='Italic '+font; | ||
| } | ||
| if(fontBoldInput.checked){ | ||
| font='Bold '+font; | ||
| } | ||
| var lines=linefold(text,width,font); | ||
@@ -160,2 +186,3 @@ canvas.width=width; | ||
| padding:10px; | ||
| padding-top:40px; | ||
| font-size:16px; | ||
@@ -165,2 +192,44 @@ color:#333333; | ||
| } | ||
| ribbon{ | ||
| display:block; | ||
| position:fixed; | ||
| top:0; | ||
| right:0; | ||
| background-color: #aa0000; | ||
| box-shadow: 0 0 5px 2px #888888; | ||
| overflow: hidden; | ||
| user-select:none; | ||
| user-drag:none; | ||
| } | ||
| ribbon a{ | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| overflow: hidden; | ||
| display: block; | ||
| color: #ffffff; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| border-top: 1px solid #ffffff; | ||
| border-bottom: 1px solid #ffffff; | ||
| margin: 2px 0; | ||
| width: 260px; | ||
| line-height: 30px; | ||
| } | ||
| @media only screen and (min-width: 600px){ | ||
| body{ | ||
| padding-top:10px; | ||
| } | ||
| ribbon { | ||
| transform-origin:50px 50%; | ||
| transform:translate(83px, 0px) rotate(45deg); | ||
| } | ||
| .inputForm{ | ||
| margin-right:120px; | ||
| } | ||
| } | ||
| .inputItemGroup{ | ||
| display:inline-block; | ||
| vertical-align:top; | ||
| } | ||
| .inputItem{ | ||
@@ -176,3 +245,4 @@ display:inline-block; | ||
| } | ||
| .inputItem input{ | ||
| .inputItem input[type='text'], | ||
| .inputItem input[type='number']{ | ||
| display: inline-block; | ||
@@ -200,2 +270,15 @@ vertical-align: top; | ||
| } | ||
| .checkboxItem{ | ||
| cursor: pointer; | ||
| } | ||
| .checkboxItem input[type='checkbox']{ | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| box-sizing: border-box; | ||
| width:16px; | ||
| height:16px; | ||
| border-radius:4px; | ||
| margin:6px 8px 0 0; | ||
| cursor: pointer; | ||
| } | ||
| .textInputTitle, | ||
@@ -202,0 +285,0 @@ .displayFormTitle{ |
+1
-1
| { | ||
| "name": "linefold", | ||
| "version": "1.0.5", | ||
| "version": "1.0.6", | ||
| "description": "Convert given text into folded lines with maximum width and given font / given text length measuring function before rendering, so as to render paragraphs onto platforms without line-folding support, e.g. HTML5 Canvas.", | ||
@@ -5,0 +5,0 @@ "main": "dist/linefold.js", |
+3
-1
@@ -55,3 +55,3 @@ <a name='english'></a> | ||
| Fold text under terminal environment with maximum width of 36 rows (each Chinese characters and punctions takes space of 2 characters): | ||
| Fold text under terminal environment with maximum width of 36 rows: | ||
@@ -78,2 +78,4 @@ var text='Convert given text into folded lines with given font and maximum width before rendering, so as to render paragraphs onto platforms without line-folding support, e.g. HTML5 Canvas.'; | ||
| Fold text with Chinese characters under terminal environment (each Chinese characters and punctions takes space of 2 characters): | ||
| var text='根据给定的文本、最大宽度、字体等条件，对一段文本进行换行操作。然后渲染到一些不支持自动换行的环境上，比如HTML5 Canvas。'; | ||
@@ -80,0 +82,0 @@ var lines=linefold(text,36,(text)=>{ |
No alert changes
Improved metrics
- Total package byte prevSize
27710
8.62%- Number of lines in readme file
171
1.18%No dependency changes