{"size": 17819, "ext": "js", "max_stars_repo_path": "docs/component---src-pages-index-js-e8868b7070f1f578b200.js", "max_stars_repo_name": "new-cairo-sky/unicode-type-kerning", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "docs/component---src-pages-index-js-e8868b7070f1f578b200.js", "max_issues_repo_name": "new-cairo-sky/unicode-type-kerning", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "docs/component---src-pages-index-js-e8868b7070f1f578b200.js", "max_forks_repo_name": "new-cairo-sky/unicode-type-kerning", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 8909.5, "max_line_length": 17739, "alphanum_fraction": 0.7274819013}
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"0mN4":function(e,t,a){"use strict";a("OGtf")("fixed",(function(e){return function(){return e(this,"tt","","")}}))},"9eSz":function(e,t,a){"use strict";a("rGqo"),a("yt8O"),a("Btvt"),a("XfO3"),a("EK0E"),a("INYr"),a("0mN4");var n=a("TqRt");t.__esModule=!0,t.default=void 0;var r,i=n(a("PJYZ")),s=n(a("VbXa")),o=n(a("8OQS")),l=n(a("pVnL")),c=n(a("q1tI")),d=n(a("17x9")),u=function(e){var t=(0,l.default)({},e),a=t.resolutions,n=t.sizes,r=t.critical;return a&&(t.fixed=a,delete t.resolutions),n&&(t.fluid=n,delete t.sizes),r&&(t.loading="eager"),t.fluid&&(t.fluid=w([].concat(t.fluid))),t.fixed&&(t.fixed=w([].concat(t.fixed))),t},f=function(e){var t=e.media;return!!t&&(v&&!!window.matchMedia(t).matches)},g=function(e){var t=e.fluid,a=e.fixed;return h(t||a).src},h=function(e){if(v&&function(e){return!!e&&Array.isArray(e)&&e.some((function(e){return void 0!==e.media}))}(e)){var t=e.findIndex(f);if(-1!==t)return e[t]}return e[0]},p=Object.create({}),m=function(e){var t=u(e),a=g(t);return p[a]||!1},b="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype,v="undefined"!=typeof window,y=v&&window.IntersectionObserver,S=new WeakMap;function E(e){return e.map((function(e){var t=e.src,a=e.srcSet,n=e.srcSetWebp,r=e.media,i=e.sizes;return c.default.createElement(c.default.Fragment,{key:t},n&&c.default.createElement("source",{type:"image/webp",media:r,srcSet:n,sizes:i}),c.default.createElement("source",{media:r,srcSet:a,sizes:i}))}))}function w(e){var t=[],a=[];return e.forEach((function(e){return(e.media?t:a).push(e)})),[].concat(t,a)}function k(e){return e.map((function(e){var t=e.src,a=e.media,n=e.tracedSVG;return c.default.createElement("source",{key:t,media:a,srcSet:n})}))}function I(e){return e.map((function(e){var t=e.src,a=e.media,n=e.base64;return c.default.createElement("source",{key:t,media:a,srcSet:n})}))}function O(e,t){var a=e.srcSet,n=e.srcSetWebp,r=e.media,i=e.sizes;return"<source "+(t?"type='image/webp' ":"")+(r?'media="'+r+'" ':"")+'srcset="'+(t?n:a)+'" '+(i?'sizes="'+i+'" ':"")+"/>"}var z=function(e,t){var a=(void 0===r&&"undefined"!=typeof window&&window.IntersectionObserver&&(r=new window.IntersectionObserver((function(e){e.forEach((function(e){if(S.has(e.target)){var t=S.get(e.target);(e.isIntersecting||e.intersectionRatio>0)&&(r.unobserve(e.target),S.delete(e.target),t())}}))}),{rootMargin:"200px"})),r);return a&&(a.observe(e),S.set(e,t)),function(){a.unobserve(e),S.delete(e)}},L=function(e){var t=e.src?'src="'+e.src+'" ':'src="" ',a=e.sizes?'sizes="'+e.sizes+'" ':"",n=e.srcSet?'srcset="'+e.srcSet+'" ':"",r=e.title?'title="'+e.title+'" ':"",i=e.alt?'alt="'+e.alt+'" ':'alt="" ',s=e.width?'width="'+e.width+'" ':"",o=e.height?'height="'+e.height+'" ':"",l=e.crossOrigin?'crossorigin="'+e.crossOrigin+'" ':"",c=e.loading?'loading="'+e.loading+'" ':"",d=e.draggable?'draggable="'+e.draggable+'" ':"";return"<picture>"+e.imageVariants.map((function(e){return(e.srcSetWebp?O(e,!0):"")+O(e)})).join("")+"<img "+c+s+o+a+n+t+i+r+l+d+'style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture>'},N=function(e){var t=e.src,a=e.imageVariants,n=e.generateSources,r=e.spreadProps,i=e.ariaHidden,s=c.default.createElement(A,(0,l.default)({src:t},r,{ariaHidden:i}));return a.length>1?c.default.createElement("picture",null,n(a),s):s},A=c.default.forwardRef((function(e,t){var a=e.sizes,n=e.srcSet,r=e.src,i=e.style,s=e.onLoad,d=e.onError,u=e.loading,f=e.draggable,g=e.ariaHidden,h=(0,o.default)(e,["sizes","srcSet","src","style","onLoad","onError","loading","draggable","ariaHidden"]);return c.default.createElement("img",(0,l.default)({"aria-hidden":g,sizes:a,srcSet:n,src:r},h,{onLoad:s,onError:d,ref:t,loading:u,draggable:f,style:(0,l.default)({position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover",objectPosition:"center"},i)}))}));A.propTypes={style:d.default.object,onError:d.default.func,onLoad:d.default.func};var R=function(e){function t(t){var a;(a=e.call(this,t)||this).seenBefore=v&&m(t),a.isCritical="eager"===t.loading||t.critical,a.addNoScript=!(a.isCritical&&!t.fadeIn),a.useIOSupport=!b&&y&&!a.isCritical&&!a.seenBefore;var n=a.isCritical||v&&(b||!a.useIOSupport);return a.state={isVisible:n,imgLoaded:!1,imgCached:!1,fadeIn:!a.seenBefore&&t.fadeIn},a.imageRef=c.default.createRef(),a.handleImageLoaded=a.handleImageLoaded.bind((0,i.default)(a)),a.handleRef=a.handleRef.bind((0,i.default)(a)),a}(0,s.default)(t,e);var a=t.prototype;return a.componentDidMount=function(){if(this.state.isVisible&&"function"==typeof this.props.onStartLoad&&this.props.onStartLoad({wasCached:m(this.props)}),this.isCritical){var e=this.imageRef.current;e&&e.complete&&this.handleImageLoaded()}},a.componentWillUnmount=function(){this.cleanUpListeners&&this.cleanUpListeners()},a.handleRef=function(e){var t=this;this.useIOSupport&&e&&(this.cleanUpListeners=z(e,(function(){var e=m(t.props);t.state.isVisible||"function"!=typeof t.props.onStartLoad||t.props.onStartLoad({wasCached:e}),t.setState({isVisible:!0},(function(){return t.setState({imgLoaded:e,imgCached:!!t.imageRef.current.currentSrc})}))})))},a.handleImageLoaded=function(){var e,t,a;e=this.props,t=u(e),a=g(t),p[a]=!0,this.setState({imgLoaded:!0}),this.props.onLoad&&this.props.onLoad()},a.render=function(){var e=u(this.props),t=e.title,a=e.alt,n=e.className,r=e.style,i=void 0===r?{}:r,s=e.imgStyle,o=void 0===s?{}:s,d=e.placeholderStyle,f=void 0===d?{}:d,g=e.placeholderClassName,p=e.fluid,m=e.fixed,b=e.backgroundColor,v=e.durationFadeIn,y=e.Tag,S=e.itemProp,w=e.loading,O=e.draggable,z=!1===this.state.fadeIn||this.state.imgLoaded,R=!0===this.state.fadeIn&&!this.state.imgCached,V=(0,l.default)({opacity:z?1:0,transition:R?"opacity "+v+"ms":"none"},o),x="boolean"==typeof b?"lightgray":b,C={transitionDelay:v+"ms"},M=(0,l.default)({opacity:this.state.imgLoaded?0:1},R&&C,{},o,{},f),T={title:t,alt:this.state.isVisible?"":a,style:M,className:g,itemProp:S};if(p){var q=p,U=h(p);return c.default.createElement(y,{className:(n||"")+" gatsby-image-wrapper",style:(0,l.default)({position:"relative",overflow:"hidden"},i),ref:this.handleRef,key:"fluid-"+JSON.stringify(U.srcSet)},c.default.createElement(y,{"aria-hidden":!0,style:{width:"100%",paddingBottom:100/U.aspectRatio+"%"}}),x&&c.default.createElement(y,{"aria-hidden":!0,title:t,style:(0,l.default)({backgroundColor:x,position:"absolute",top:0,bottom:0,opacity:this.state.imgLoaded?0:1,right:0,left:0},R&&C)}),U.base64&&c.default.createElement(N,{ariaHidden:!0,src:U.base64,spreadProps:T,imageVariants:q,generateSources:I}),U.tracedSVG&&c.default.createElement(N,{ariaHidden:!0,src:U.tracedSVG,spreadProps:T,imageVariants:q,generateSources:k}),this.state.isVisible&&c.default.createElement("picture",null,E(q),c.default.createElement(A,{alt:a,title:t,sizes:U.sizes,src:U.src,crossOrigin:this.props.crossOrigin,srcSet:U.srcSet,style:V,ref:this.imageRef,onLoad:this.handleImageLoaded,onError:this.props.onError,itemProp:S,loading:w,draggable:O})),this.addNoScript&&c.default.createElement("noscript",{dangerouslySetInnerHTML:{__html:L((0,l.default)({alt:a,title:t,loading:w},U,{imageVariants:q}))}}))}if(m){var H=m,P=h(m),W=(0,l.default)({position:"relative",overflow:"hidden",display:"inline-block",width:P.width,height:P.height},i);return"inherit"===i.display&&delete W.display,c.default.createElement(y,{className:(n||"")+" gatsby-image-wrapper",style:W,ref:this.handleRef,key:"fixed-"+JSON.stringify(P.srcSet)},x&&c.default.createElement(y,{"aria-hidden":!0,title:t,style:(0,l.default)({backgroundColor:x,width:P.width,opacity:this.state.imgLoaded?0:1,height:P.height},R&&C)}),P.base64&&c.default.createElement(N,{ariaHidden:!0,src:P.base64,spreadProps:T,imageVariants:H,generateSources:I}),P.tracedSVG&&c.default.createElement(N,{ariaHidden:!0,src:P.tracedSVG,spreadProps:T,imageVariants:H,generateSources:k}),this.state.isVisible&&c.default.createElement("picture",null,E(H),c.default.createElement(A,{alt:a,title:t,width:P.width,height:P.height,sizes:P.sizes,src:P.src,crossOrigin:this.props.crossOrigin,srcSet:P.srcSet,style:V,ref:this.imageRef,onLoad:this.handleImageLoaded,onError:this.props.onError,itemProp:S,loading:w,draggable:O})),this.addNoScript&&c.default.createElement("noscript",{dangerouslySetInnerHTML:{__html:L((0,l.default)({alt:a,title:t,loading:w},P,{imageVariants:H}))}}))}return null},t}(c.default.Component);R.defaultProps={fadeIn:!0,durationFadeIn:500,alt:"",Tag:"div",loading:"lazy"};var V=d.default.shape({width:d.default.number.isRequired,height:d.default.number.isRequired,src:d.default.string.isRequired,srcSet:d.default.string.isRequired,base64:d.default.string,tracedSVG:d.default.string,srcWebp:d.default.string,srcSetWebp:d.default.string,media:d.default.string}),x=d.default.shape({aspectRatio:d.default.number.isRequired,src:d.default.string.isRequired,srcSet:d.default.string.isRequired,sizes:d.default.string.isRequired,base64:d.default.string,tracedSVG:d.default.string,srcWebp:d.default.string,srcSetWebp:d.default.string,media:d.default.string});R.propTypes={resolutions:V,sizes:x,fixed:d.default.oneOfType([V,d.default.arrayOf(V)]),fluid:d.default.oneOfType([x,d.default.arrayOf(x)]),fadeIn:d.default.bool,durationFadeIn:d.default.number,title:d.default.string,alt:d.default.string,className:d.default.oneOfType([d.default.string,d.default.object]),critical:d.default.bool,crossOrigin:d.default.oneOfType([d.default.string,d.default.bool]),style:d.default.object,imgStyle:d.default.object,placeholderStyle:d.default.object,placeholderClassName:d.default.string,backgroundColor:d.default.oneOfType([d.default.string,d.default.bool]),onLoad:d.default.func,onError:d.default.func,onStartLoad:d.default.func,Tag:d.default.string,itemProp:d.default.string,loading:d.default.oneOf(["auto","lazy","eager"]),draggable:d.default.bool};var C=R;t.default=C},FLlr:function(e,t,a){var n=a("XKFU");n(n.P,"String",{repeat:a("l0Rn")})},INYr:function(e,t,a){"use strict";var n=a("XKFU"),r=a("CkkT")(6),i="findIndex",s=!0;i in[]&&Array(1)[i]((function(){s=!1})),n(n.P+n.F*s,"Array",{findIndex:function(e){return r(this,e,arguments.length>1?arguments[1]:void 0)}}),a("nGyu")(i)},OGtf:function(e,t,a){var n=a("XKFU"),r=a("eeVq"),i=a("vhPU"),s=/"/g,o=function(e,t,a,n){var r=String(i(e)),o="<"+t;return""!==a&&(o+=" "+a+'="'+String(n).replace(s,"&quot;")+'"'),o+">"+r+"</"+t+">"};e.exports=function(e,t){var a={};a[e]=t(o),n(n.P+n.F*r((function(){var t=""[e]('"');return t!==t.toLowerCase()||t.split('"').length>3})),"String",a)}},RXBc:function(e,t,a){"use strict";a.r(t);var n=a("q1tI"),r=a.n(n),i=(a("Wbzz"),a("Bl7J")),s=(a("ezAz"),a("9eSz"),a("vrFN")),o=(a("L2Gh"),a("FLlr"),a("XfO3"),a("HEwt"),a("Oyvg"),function(){var e=Object(n.useRef)(),t=Object(n.useState)("T᠎h᠎᠎e ᠎᠎᠎᠎Q᠎᠎u᠎᠎i᠎᠎c᠎k᠎ ᠎᠎᠎B᠎᠎r᠎᠎o᠎᠎᠎w᠎n᠎᠎᠎ ᠎᠎᠎F᠎᠎᠎o᠎᠎᠎x ᠎J᠎᠎᠎᠎u᠎᠎᠎m᠎᠎p᠎᠎e᠎᠎d ᠎᠎᠎᠎᠎O᠎v᠎᠎e᠎᠎r ᠎᠎t᠎h᠎᠎e᠎ ᠎᠎᠎᠎L᠎᠎a᠎zy᠎ ᠎D᠎᠎o᠎g᠎᠎᠎."),a=t[0],i=t[1],s=Object(n.useState)(void 0),o=s[0],l=s[1],c=Object(n.useState)(void 0),d=c[0],u=c[1],f=Math.round(125)/1e3,g=Math.round(25)/1e3,h=g,p=-1*h,m=RegExp("[ ?᠎?]+","gu"),b=function(e,t){var n=a.matchAll(m),r=0,s=e,o=s;if(n){var l=Array.from(n);console.log("matches",e,l),l.forEach((function(t){console.log("match",t,t[0].length),t.index<=e&&e<=t.index+t[0].length&&(r=y(t[0]),s=t.index,o=s+t[0].length)}))}r+=t,console.log("increaseKerning to",r);var c=v(r),d=""+a.substring(0,s)+c+a.substring(o);i(d)},v=function(e){var t="";if(e>0){var a=Math.floor(e/f),n=e%f,r=a,i=0;if(n>0)r=a+1,i=f/g-Math.floor(n/g);t=""+" ".repeat(r)+"᠎".repeat(i),console.log("kerningString",r,i)}else if(e<0){var s=Math.floor(-1*e/g);t=""+"᠎".repeat(s)}return t},y=function(e){for(var t=0,a=0;a<e.length;a++){var n=e.substr(a,1);" "===n?t+=f:"᠎"===n&&(t-=g)}return console.log("charsToKerning kerning",t),t},S=function(t){console.log("keyUp");var n=e.current.selectionStart;e.current.value;if("."===t.key&&t.getModifierState("Control")){var r=function(e){var t=a.matchAll(m),n=0;if(t){var r=Array.from(t);console.log("matches",e,r),r.forEach((function(t){console.log("match",t,t[0].length),t.index<=e&&e<=t.index+t[0].length&&(n=y(t[0]))}))}return n}(n);console.log("kerningToChars",v(r)),b(n,h),l(n),u(n)}else","===t.key&&t.getModifierState("Control")?(b(n,-1*h),l(n),u(n)):(l(void 0),u(void 0))};return Object(n.useEffect)((function(){o&&(e.current.selectionStart=o),d&&(e.current.selectionEnd=d)})),r.a.createElement("div",{className:"kerning-editor"},r.a.createElement("textarea",{style:{letterSpacing:p+"em"},ref:e,className:"kerning-editor__textarea",onKeyUp:function(e){return S(e)},onChange:function(e){return function(e){console.log("change"),i(e.target.value)}(e)},value:a}))});t.default=function(){return r.a.createElement(i.a,null,r.a.createElement(s.a,{title:"Unicode Type Kerning"}),r.a.createElement(o,null),r.a.createElement("div",{className:"about"},r.a.createElement("h2",null,"Experimental Unicode Type Kerning"),r.a.createElement("h3",{className:"about__title"},"How to Use"),r.a.createElement("p",null,"Set the cursor between the letters you want to kern. Use the keys"," ",r.a.createElement("code",null,"ctrl"),"-",r.a.createElement("code",null,"."),"  to increase kerning. Use"," ",r.a.createElement("code",null,"ctrl"),"-",r.a.createElement("code",null,","),"  to decrease it."),r.a.createElement("h3",{className:"about__title"},"How it works"),r.a.createElement("p",null,'Kerning is achieved through the unique typographic characteristics of the U+180E "Mongolian Vowel Separator" (MVS) character. Unlike other white-space glyphs, U+180E has no intrinsic width and unlike other Zero-Space Non/Joiner characters, it ',r.a.createElement("em",null,"does")," adopt typographic css properties. The result is a variable-width space that is equal to the value of the letter-spacing css property. Additionally, it is a non-breaking character and will not result in line-wrapping."),r.a.createElement("p",null,"By setting the letter-spacing to a negative value, the MVS character can reduce the spacing between letters. But to allow for positive kerning, the MVS must be used in conjunction with a white space glyph - here the U+202F Narrow Non-breaking Space (NNB SP) unicode glyph is used. The estimated width of the NNBSP is ~ 1/8th EM. In the demo above, a negative kerning unit of 1/40th (.025) EM is employed. In this way a single 1/40 positive kerning increment is possible by setting the unicode sequence ",r.a.createElement("code",null," NNBSP MVS MVS MVS MVS")," or"," ",r.a.createElement("code",null,"1/8 - 1/40 - 1/40 - 1/40 - 1/40")," → ",r.a.createElement("code",null,"5/40 - 4/40")," ","= ",r.a.createElement("code",null,"1/40EM")),r.a.createElement("h3",{className:"about__title"},"Why?"),r.a.createElement("p",null,"Text set using this technique can / may / has a chance of working across different environments. ie. The same text should, in theory, retain its kerning in Html, rich text, or page-layout software and doesn't require any markup language. In the past, most web kerning solutions have used a combination of JS, CSS, and lots of ",r.a.createElement("code",null,"span")," elements. On the other hand, this approach just uses a bunch of Unicode characters that are usually retained between copy/paste cycles in various contexts."),r.a.createElement("h3",null,"Limitations"),r.a.createElement("p",null,"This proof-of-concept relies on the text element having a negative letter-spacing css value that is equal to the kerning unit you wish to use. In other words, it is not possible to increase the overall letter-tracking to a value larger than zero.")))}},ezAz:function(e){e.exports=JSON.parse('{"data":{"placeholderImage":{"id":"3ae2040f-b583-583b-9d56-5e34480d0c50","childImageSharp":{"id":"954156df-7559-5e97-af9f-8c8dc9819fc2","fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsSAAALEgHS3X78AAACYklEQVQ4y42Uy28SQRjA+dM8efDmwYN6qF6qiSY+Y/WgQRMibY00TaWNBSRSCraYQtHl/bR0KyxQWCgWWAqU8izl/Sq7rLNsRHlVJpvJtzPfb77nDIOcZHSoqZSrp4+KtXIziubaLRysMCZiCYqOoVnhjNEi8RcztdxxeTzc6VBfT+5O2Vhpb+vw4wMdZ0ppWvP9xzLeJoDNThf2W+Nz1+XzNxQubSToSKKW+BDc+WOnkshhSVgeCiGpViZMEg1oxc26Knt+ae3bEtJTZwzE1kXLccG0+sOOlrcvZXvsczPkITfsa20vwIKnhsh+BnjUarT74Gb13CY7KBVJMv3z4N1NszQYsMWM62HNrCis/GxXn0iYls23uz5LPBcv0bH8hUH2XRoM85ySXv7JBtO87jMIvWq+H5GoYIHCLA1ZxD6Qap3Ak8IKfW7TJ50lK6uP9E6RgndHaODtCJ6Z5RyHfnE7j6gRbcKlCYNSt+rtETHTpUGgEP8FYmdNqd/Mo7aiVWTfuH2L9xASvfxxlqr01EYkrJszvNkgW9bH0OuFr+99m+y9IOeyU6zIp/Hubp/yMEztlzFPwOhdvq+nIoS1JNn4t2sugCmVsDvPe2KKolnZLCxhOcAKQRDDXTQaVi46lqYhIBwHTrl3oWqhMRDtaJge37lOBMKo4tfbqhVX0J7snTsWps8uZWuoOQY6CcjpSIF55UvmqNgr5wUwtV1IVdnXtnSfPEB2qjDNqnvczRl0m+j6Jn5lXb6nAQJqinmN0ZEBj03YLzghY8PnTRz80o/GRJZpOLCb0PM9BN7pvUEjx28V00WUg9jIVwAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/630fb/gatsby-astronaut.png","srcSet":"/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/5db04/gatsby-astronaut.png 75w,\\n/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/6d161/gatsby-astronaut.png 150w,\\n/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/630fb/gatsby-astronaut.png 300w,\\n/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/62b1f/gatsby-astronaut.png 450w,\\n/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/2a4de/gatsby-astronaut.png 600w,\\n/unicode-type-kerning/static/6d91c86c0fde632ba4cd01062fd9ccfa/ee604/gatsby-astronaut.png 800w","sizes":"(max-width: 300px) 100vw, 300px"}}}}}')},l0Rn:function(e,t,a){"use strict";var n=a("RYi7"),r=a("vhPU");e.exports=function(e){var t=String(r(this)),a="",i=n(e);if(i<0||i==1/0)throw RangeError("Count can't be negative");for(;i>0;(i>>>=1)&&(t+=t))1&i&&(a+=t);return a}}}]);
//# sourceMappingURL=component---src-pages-index-js-e8868b7070f1f578b200.js.map