improve(pretty-text-underline.md)
This commit is contained in:
atomiks
@ -1,6 +1,6 @@
|
||||
require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;i<n.length;i++)t(n[i]);return t}({19:[function(require,module,exports) {
|
||||
require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;i<n.length;i++)t(n[i]);return t}({20:[function(require,module,exports) {
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,function(){"use strict";!function(e){var t;function n(){t||(t=!0,e())}"complete"===document.readyState?e():(t=!1,document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1))}(function(){var e=!0,t=!1,n=null,o={text:!0,search:!0,url:!0,tel:!0,email:!0,password:!0,number:!0,date:!0,month:!0,week:!0,time:!0,datetime:!0,"datetime-local":!0};function d(t){e=!1}function i(){document.addEventListener("mousemove",u),document.addEventListener("mousedown",u),document.addEventListener("mouseup",u),document.addEventListener("pointermove",u),document.addEventListener("pointerdown",u),document.addEventListener("pointerup",u),document.addEventListener("touchmove",u),document.addEventListener("touchstart",u),document.addEventListener("touchend",u)}function u(t){"html"!==t.target.nodeName.toLowerCase()&&(e=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mousedown",u),document.removeEventListener("mouseup",u),document.removeEventListener("pointermove",u),document.removeEventListener("pointerdown",u),document.removeEventListener("pointerup",u),document.removeEventListener("touchmove",u),document.removeEventListener("touchstart",u),document.removeEventListener("touchend",u))}document.addEventListener("keydown",function(t){t.altKey||t.ctrlKey||t.metaKey||(e=!0)},!0),document.addEventListener("mousedown",d,!0),document.addEventListener("pointerdown",d,!0),document.addEventListener("touchstart",d,!0),document.addEventListener("focus",function(t){var n,d,i;t.target!=document&&"HTML"!=t.target.nodeName&&(e||(n=t.target,d=n.type,"INPUT"==(i=n.tagName)&&o[d]&&!n.readonly||"TEXTAREA"==i&&!n.readonly||"true"==n.contentEditable))&&(function(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""))}(t.target),e=!1)},!0),document.addEventListener("blur",function(e){var o;e.target!=document&&"HTML"!=e.target.nodeName&&e.target.classList.contains("focus-visible")&&(t=!0,window.clearTimeout(n),n=window.setTimeout(function(){t=!1,window.clearTimeout(n)},100),(o=e.target).hasAttribute("data-focus-visible-added")&&(o.classList.remove("focus-visible"),o.removeAttribute("data-focus-visible-added")))},!0),document.addEventListener("visibilitychange",function(n){"hidden"==document.visibilityState&&(t&&(e=!0),i())},!0),i(),document.body.classList.add("js-focus-visible")})});
|
||||
},{}],20:[function(require,module,exports) {
|
||||
},{}],19:[function(require,module,exports) {
|
||||
|
||||
},{}],22:[function(require,module,exports) {
|
||||
var global = (1,eval)("this");
|
||||
@ -27,4 +27,4 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter
|
||||
"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='<i data-feather="edit-2"></i>Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
|
||||
},{"../deps/utils":18}],7:[function(require,module,exports) {
|
||||
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
|
||||
},{"focus-visible":19,"normalize.css":20,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":20,"../css/index.scss":20,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[7])
|
||||
},{"focus-visible":20,"normalize.css":19,"prismjs":22,"feather-icons":21,"../css/deps/prism.css":19,"../css/index.scss":19,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":15,"./components/CodepenCopy":16}]},{},[7])
|
||||
File diff suppressed because one or more lines are too long
30
index.html
30
index.html
@ -1907,14 +1907,12 @@ li:not(:last-child) {
|
||||
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html"><p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
|
||||
</code></pre>
|
||||
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.pretty-text-underline {
|
||||
font-family: Arial, sans-serif;
|
||||
display: inline;
|
||||
font-size: 18px;
|
||||
text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
|
||||
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
|
||||
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
|
||||
background-position: 0 0.98em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1px 1px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
.pretty-text-underline::-moz-selection {
|
||||
background-color: rgba(0, 150, 255, 0.3);
|
||||
@ -1931,14 +1929,12 @@ li:not(:last-child) {
|
||||
</div>
|
||||
<style>
|
||||
.snippet-demo__pretty-text-underline {
|
||||
font-family: Arial, sans-serif;
|
||||
display: inline;
|
||||
font-size: 18px !important;
|
||||
text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
|
||||
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
|
||||
background-position: 0 0.98em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1px 1px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
.snippet-demo__pretty-text-underline::-moz-selection {
|
||||
background-color: rgba(0, 150, 255, 0.3);
|
||||
@ -1951,11 +1947,11 @@ li:not(:last-child) {
|
||||
</style>
|
||||
<h4>Explanation</h4>
|
||||
<ol>
|
||||
<li><code>text-shadow: ...</code> has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use
|
||||
a larger <code>px</code> size.</li>
|
||||
<li><code>background-image: linear-gradient(...)</code> creates a 90deg gradient with the current text color (<code>currentColor</code>).</li>
|
||||
<li>The <code>background-*</code> properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.</li>
|
||||
<li>The <code>::selection</code> pseudo selector ensures the text shadow does not interfere with text selection.
|
||||
<li><code>text-shadow</code> uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger
|
||||
<code>px</code> size. Additional values can create an even thicker shadow, and subpixel values can also be used.</li>
|
||||
<li><code>background-image: linear-gradient(...)</code> creates a 90deg gradient using the text color (<code>currentColor</code>).</li>
|
||||
<li>The <code>background-*</code> properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.</li>
|
||||
<li>The <code>::selection</code> pseudo selector rule ensures the text shadow does not interfere with text selection.
|
||||
</li>
|
||||
</ol>
|
||||
<h4>Browser support</h4>
|
||||
@ -1964,7 +1960,7 @@ li:not(:last-child) {
|
||||
95.4%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).</span></p>
|
||||
<p><span class="snippet__support-note">✅ No caveats.</span></p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://caniuse.com/#feat=css-textshadow" target="_blank">https://caniuse.com/#feat=css-textshadow</a>
|
||||
|
||||
@ -13,14 +13,12 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
|
||||
|
||||
```css
|
||||
.pretty-text-underline {
|
||||
font-family: Arial, sans-serif;
|
||||
display: inline;
|
||||
font-size: 18px;
|
||||
text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
|
||||
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
|
||||
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
|
||||
background-position: 0 0.98em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1px 1px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
.pretty-text-underline::-moz-selection {
|
||||
background-color: rgba(0, 150, 255, 0.3);
|
||||
@ -40,17 +38,15 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
|
||||
|
||||
<style>
|
||||
.snippet-demo__pretty-text-underline {
|
||||
font-family: Arial, sans-serif;
|
||||
display: inline;
|
||||
font-size: 18px !important;
|
||||
text-shadow: 1px 1px 0 #f5f6f9,
|
||||
-1px 1px 0 #f5f6f9,
|
||||
-1px -1px 0 #f5f6f9,
|
||||
1px -1px 0 #f5f6f9;
|
||||
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
|
||||
background-position: 0 0.98em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1px 1px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
|
||||
.snippet-demo__pretty-text-underline::-moz-selection {
|
||||
@ -66,18 +62,21 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
|
||||
|
||||
#### Explanation
|
||||
|
||||
1. `text-shadow: ...` has 4 values with offsets that cover a 4x4 px area to ensure the underline
|
||||
1. `text-shadow` uses 4 values with offsets that cover a 4x4 px area to ensure the underline
|
||||
has a "thick" shadow that covers the line where descenders clip it. Use a color
|
||||
that matches the background. For a larger font, use a larger `px` size.
|
||||
2. `background-image: linear-gradient(...)` creates a 90deg gradient with the current
|
||||
that matches the background. For a larger font, use a larger `px` size. Additional values
|
||||
can create an even thicker shadow, and subpixel values can also be used.
|
||||
2. `background-image: linear-gradient(...)` creates a 90deg gradient using the
|
||||
text color (`currentColor`).
|
||||
3. The `background-*` properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
|
||||
4. The `::selection` pseudo selector ensures the text shadow does not interfere with text
|
||||
3. The `background-*` properties size the gradient as 100% of the width of the block and 1px
|
||||
in height at the bottom and disables repetition, which creates a 1px underline beneath
|
||||
the text.
|
||||
4. The `::selection` pseudo selector rule ensures the text shadow does not interfere with text
|
||||
selection.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<span class="snippet__support-note">⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).</span>
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-textshadow
|
||||
* https://caniuse.com/#feat=css-gradients
|
||||
|
||||
Reference in New Issue
Block a user