結果は、LESSのdata-URIにあるPNGジェネレーターです。
デモ
実装オプション
半透明、点線、および点線の下線は、 border-bottom
から簡単に追加できます☞。
興味深い部分は、行をテキストに近づけたいときに始まります。
ビューを構築できます
<a class="link"><span>Some link text here</span></a>
span
（または）要素の
line-height
を調整して、それを
display:inline-block
ですが、複数行のテキストで問題が発生します：
inline-block
は境界線の表示に関して実際のブロックになります（右側の図）。
反射と実験の後、私は、最も「きれい」で最も便利な解決策は、
line-height
等しい高さの下線パターンを
background
に置くことであるという結論に達しました。 このパターンをどこで取得するかを理解するだけです。
- 側面のどこかに画像を生成し、それをファイルとして接続することは柔軟性がなく、開発には不便です。変更するたびに神経が殺されます。
- キャンバスを介してPNGジェネレーターを使用します（ 例 ： など ）が、開発においても不便です：毎回、データURIを生成します。
- Repeating-gradientを生成しますが、これは非常に信頼性の低い方法です。下線のピクセルに正確に入らないリスクがあり、破線の下線が実装されていないためです。
最も論理的なことは、PNGを動的に生成し、それをdata-URIに貼り付けることでした。 stackoverflowに関する質問から、1人の人がすでに1つのピクセルでGIF画像を生成することができたことがわかりました （ ここ ）、非常に簡単で柔軟性がないと言わなければなりません：この画像のサイズを変更することは、コード全体を書き換えることと同等のタスクになります
週末が来ていたので、下線付きリンクの汚い実装にイライラするのをやめ、PNGの生成に対処することにしました。
PNG.js
PNG 、 ZLIBデータ形式 、およびDEFLATEデータ形式の仕様を数時間学習した後、PNGのシリアル化と小さなリバースエンジニアリングの例 （ ここでは生のpng生成の例 ）とともに、 PESSを操作するためのjsクラスが作成されました。 。
PNGクラスは、インデックス付きカラーまたはビットマップ（アルファ付きトゥルーカラー）で非圧縮PNGを生成できます。 次のように使用します。
PNG.jsユースケース
<script src="png.js"></script> <script> var png = new PNG(); png.set({ width: w, height: h, chunks: { PLTE: plte, //palette string (sequence of colors, 3 bytes per color), eg "000000ffffff" ⇒ black, white tRNS: trns //transparency string (alpha-values according to the palette colors, 1 byte per value), eg "00ff" ⇒ 0, 1 }, data: data //string of color indexes (or bitmap), 1 byte per color index, eg "00010100" ⇒ black, white, white, black }) result = png.toDataURL() //⇒ data:image/png;base64,iV... </script>
JSをLESSで実行する
結局のところ、LESSはJSを実行するのに非常に柔軟です。 たとえば、次の方法で関数を実行できます。
@test: `function(a){ return a }`; test: `(@{test})(3)`; //test: 3
png.jsを混合物に移動し、インターフェースを作成すると、結果は次のコードになります。
画家
//Painting functions @text: black; @red: red; @green: green; .underline(@height: 20, @color: @text, @thickness: 1){ @patternGen: `function(h, thick){ var space = "", line = ""; //make line for (var i = 0; i < thick; i++){ line += "01" } //make space for (var i = 0; i < h - thick; i++){ space += "00" } return space + line; }`; @pattern: `(@{patternGen})(@{height}, @{thickness})`; .png(@stream: @pattern, @w: 1, @h: unit(@height), @color: @color); } .underline{ .underline(); } .underline.thick{ .underline(@thickness: 2); } .underline.offset{ } .underline.transparent{ .underline(@color: fade(@text, 30%), @thickness: 1); } .waved(@height: 20, @color: @red, @thickness: 2, @width: 4){ @patternGen: `function(h, w, thick){ var space = "", wave = ""; //make wave for (var y = 0; y < thick; y++){ for (var x = 0; x < w; x++){ if (x < w/2){ if (y < thick/2) { wave += "00" } else{ wave += "01" } } else { if (y < thick/2) { wave += "01" } else{ wave += "00" } } } } //make space for (var i = 0; i < (h - thick)*w; i++){ space += "00" } return space + wave; }`; @pattern: `(@{patternGen})(@{height}, @{width}, @{thickness})`; ptrn: @pattern; .png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .waved{ .waved(); } .waved.alt{ .waved(@color: @green, @thickness: 2, @width: 6); } .dotted(@height: 20, @color: @text, @width: 3, @thickness: 1){ @patternGen: `function(h, thick, w){ var space = "", line = ""; //make line for (var i = 0; i < thick; i++){ for(var x = 0; x < thick; x++){ line += "01"; } for(var x = thick; x < w; x++){ line += "00"; } } //make space for (var i = 0; i < (h - thick)*w; i++){ space += "00" } return space + line; }`; @pattern: `(@{patternGen})(@{height}, @{thickness}, @{width})`; .png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dotted{ .dotted; } .dotted.rare{ .dotted(@width: 6); } .dotted.thick{ .dotted(@width: 6, @thickness: 2); } .dashed(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4){ @patternGen: `function(h, thick, w, l){ var space = "", line = ""; //make line for (var i = 0; i < thick; i++){ for(var x = 0; x < l; x++){ line += "01"; } for(var x = l; x < w; x++){ line += "00"; } } //make space for (var i = 0; i < (h - thick)*w; i++){ space += "00" } return space + line; }`; @pattern: `(@{patternGen})(@{height}, @{thickness}, @{width}, @{length})`; .png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dashed{ .dashed; } .dashed.rare{ .dashed(@width: 6); } .dashed.thick{ .dashed(@width: 10, @thickness: 2, @length: 6); } .dot-dashed(@height: 20, @color: @text, @width: 10, @thickness: 1){ @patternGen: `function(h, thick, w){ var space = "", line = ""; //make line for (var i = 0; i < thick; i++){ for(var x = 0; x < w; x++){ switch (true){ case (x > w*.75): line += "00"; break; case (x > w*.375): line += "01"; break; case (x > w*.125): line += "00"; break; default: line += "01"; } } } //make space for (var i = 0; i < (h - thick)*w; i++){ space += "00" } return space + line; }`; @pattern: `(@{patternGen})(@{height}, @{thickness}, @{width})`; .png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dot-dashed{ .dot-dashed; } .dot-dashed.thick{ .dot-dashed(@width: 10, @thickness: 2); } .pattern(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4, @pattern: ". -"){ } //Mixin that generates PNG to background .png(@stream: "0001", @w: 2, @h: 2, @color: black){ @r: red(@color); @g: green(@color); @b: blue(@color); @hexColor: rgb(red(@color),green(@color),blue(@color)); @PLTE: `"ffffff" + ("@{hexColor}").substr(1)`; //Make bytes palette: first-white, rest-passed color; @a: alpha(@color); @tRNS: `"ff" + (function(){ var a = Math.round(@{a} * 255).toString(16); return (a.length == 1 ? "0" + a : a) })()`; //png.js: https://github.com/dfcreative/graphics/blob/master/src/PNG.js @initPNG: `(function(){ /*...copy-pasted png.js: https://github.com/dfcreative/graphics/blob/master/src/PNG.js */)()`; @background: `(function(){ var png = new PNG(); png.set({ width: @{w}, height: @{h}, chunks:{ PLTE: @{PLTE}, tRNS: @{tRNS} }, data: @{stream} }) return "url(" + png.toDataURL() + ")"; })()`; background-image: ~"@{background}"; } .png{ .png(); }
使い方は？
1. デモのように、 less.js
とless.js
接続します
<link rel="stylesheet/less" type="text/css" href="painter.less" /> <script src="less.js" type="text/javascript"></script>
2.スパン要素にクラスを使用します。
<span class="underline"> </span> <span class="underline thick">c </span> <span class="underline offset"> </span> <span class="underline transparent"> </span> <span class="waved"> </span> <span class="waved alt"> 2</span> <span class="dotted"> </span> <span class="dotted rare"> </span> <span class="dotted thick"> </span> <span class="dashed"> </span> <span class="dashed thick"> </span> <span class="dot-dashed">- </span>
3.利用可能なミックスイン：
-
.underline(@height: 20, @color: @text, @thickness: 1)
-
.waved(@height: 20, @color: @red, @thickness: 2, @width: 4)
-
.dotted(@height: 20, @color: @text, @width: 3, @thickness: 1)
-
.dashed(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4)
-
.dot-dashed(@height: 20, @color: @text, @width: 10, @thickness: 1)
.png(@stream: "0001", @w: 2, @h: 2, @color: black)
を使用して、インデックスカラーのビットストリームを直接送信することもできます。
一番下の行： demo 、 githubリポジトリ 。