Highlighters-kirjasto: Aidon tussimerkinnän tuominen verkkosivuille

Myönnettäköön: suurimman osan ajasta "korostaminen" verkkosivuilla on varsin ankea kokemus. Haluaisit kokea samaa tyydytystä kuin vetäisit keltaisen tussin painetun tekstin päältä, mutta lopputulos on pettymys – yksinkertainen suorakulmainen taustaväri, joka roikkuu sanojesi takana kuin vanha tussi laatikossa.

Highlighters-kirjasto vie asian aivan uusille urille.

Enemmän kuin pelkkä taustaväri

Tässä ei ole kyse background-color: #ffff00 -komennosta. Kyse on oikeasta tussin jäljestä – sellaisesta yksityiskohdasta, joka erottaa "toimivan" ja "iloa tuottavan". Kun piirrät korostuksen, näet:

• Mustepisaroita siellä, mihin vedot alkavat ja päättyvät
• Raitoja, jotka jäävät jälkeensä ikään kuin muste kuivuisi kesken vedon
• Tyypillistä vuotoa viimeisen kirjaimen ohi, aivan kuten oikealla paperilla

Tekstisi säilyy täysin muuttumattomana näiden efektien alla. Käyttäjät voivat edelleen valita, kopioida, etsiä ja olla vuorovaikutuksessa korostetun tekstin kanssa aivan kuin ennenkin.

Kolme kärkeä, rajattomat mahdollisuudet

Kirjasto tarjoaa kolme yleisintä tussinkärjen muotoa:

| Kärki | Ominaisuus | Sopii erityisesti | |-------|------------|-------------------| | Leveä taltta | Laajat, litteät vedot | Kokonaisten lauseiden korostaminen | | Pyöristetty luoti | Keskikokoiset, pehmeät reunat | Yleiseen käyttöön | | Hieno kärki | Tarkat, kapeat viivat | Yksittäisten sanojen korostaminen |

Yhdistele rohkeasti. Pinoa vetoja ja katso niiden käyttäytymistä – limittäiset alueet tummenevat juuri niin kuin oikean tussin kanssa. Jotkut värit toistuvat jopa silmiinpistävällä fluoresoivalla laadulla.

Vaivaton integrointi

Kirjasto on yllättävän kevyt ja toimii missä tahansa, mutta modernien kehysten käyttäjille löytyy viralliset sidokset Reactille, Vue:lle ja Sveltelle:

npm install @highlighters/core
npm install @highlighters/react
npm install @highlighters/vue
npm install @highlighters/svelte

Missä tämä loistaa

Kuvittele ominaisuus käytännössä:

• Yhteistyöeditorit, joissa käyttäjät voivat tehdä merkintöjä yhdessä
• Verkkokurssit, joissa opiskelijat voivat tehdä omia muistiinpanojaan
• Luovat kirjoitusvälineet, jotka tuovat fyysisen kirjoittamisen tunteen ruudulle
• Arviointijärjestelmät, joissa sidosryhmät voivat merkitä tärkeitä kohtia
• Saavutettavuustyökalut, jotka auttavat käyttäjiä seuraamaan lukukohtaa

Pikku yksityiskohdilla on väliä

Eniten minua viehättää todelliseen käyttäytymiseen panostaminen. Korostukset pysyvät paikallaan selattaessa ja ikkunan kokoa muutettaessa. Vedot todella istuvat sisällön päällä sen sijaan, että ne muuttaisivat sitä. Tämä tarkoittaa ei enää HTML:n rakenteen muutoksia, ei z-index-ongelmia eikä saavutettavuushuolia.

Verkkokehityksen maailmassa, jossa usein tingitään käsityöstä käytännöllisyyden hyväksi, Highlighters muistuttaa meitä siitä, että pienet, konkreettiset yksityiskohdat jättävät usein suurimman vaikutuksen. Joskus se ominaisuus, jota käyttäjät eivät tienneet tarvitsevansa, on juuri se, joka saa heidät sanomaan "woa, tämä tuntuu erilaiselta."

Tutustu projektiin osoitteessa https://highlighte.rs/ ja anna seuraavalle projektillesi ripaus lisää väriä.