Ligatury i przenoszenie wyrazów

Arku­sze sty­lów i mo­rze do­stęp­nych w sie­ci czcio­nek sta­wia­ją dziś pro­jek­tan­ta stron in­ter­ne­to­wych nie­mal w po­zy­cji dru­ka­rza. Kon­tro­la nad wy­glą­dem do­ku­men­tu jest pra­wie cał­ko­wi­ta. W związ­ku z tym wie­le sub­tel­noś­ci ty­po­gra­fii, wcześ­niej po­wszech­nie igno­ro­wa­nych w In­ter­ne­cie, wkra­cza rów­nież do HTML. Jed­ną z nich są li­ga­tu­ry, czy­li gra­ficz­ne oz­dob­ne po­łą­cze­nia dwóch li­ter. Nie­ste­ty z po­wo­du błę­dów w prze­glą­dar­kach mo­gą nam też spra­wić kło­po­ty.

In­ną po­dob­ną no­woś­cią jest dzie­le­nie wy­ra­zów za po­mo­cą łącz­ni­ków opcjo­nal­nych, zna­nych sze­rzej ja­ko „soft hyp­hens”. Są to nie­wi­docz­ne zna­ki mó­wią­ce prze­glą­dar­ce o tym, gdzie moż­na prze­nieść wy­raz. Dzie­le­nie wy­ra­zów na­bra­ło szcze­gól­ne­go zna­cze­nia po roz­pow­szech­nie­niu się smart­fo­nów. Tekst w ukła­dzie pio­no­wym na ekra­nie smart­fo­na znacz­nie zys­ku­je na wy­glą­dzie po po­dzie­le­niu wy­ra­zów. Przy­kła­do­wo ten blog jest za­pro­jek­to­wany z myś­lą o czy­ta­niu go rów­nież na smart­fo­nach w ukła­dzie pio­no­wym.

Nie­któ­re prze­glą­dar­ki po­tra­fią auto­ma­tycz­nie dzie­lić wy­ra­zy zgod­nie z re­gu­ła­mi ję­zy­ka stro­ny. To bar­dzo przy­dat­na ce­cha, bo wsta­wie­nie łącz­ni­ków opcjo­nal­nych „na twar­do” w kod stro­ny to do­dat­ko­wa czyn­ność do zro­bie­nia, poza tym może to utrud­nić póź­niej­szą edy­cję. Pech chce, że – jak to za­zwy­czaj by­wa z no­wy­mi przy­dat­ny­mi udo­sko­na­le­nia­mi prze­glą­da­rek – wciąż są to nie­któ­re prze­glą­dar­ki. Chro­me, An­dro­id Brow­ser, Ope­ra, nie ma­ją tej ce­chy, a tej trój­ki nie da się po pros­tu po­mi­nąć. Stąd mię­dzy in­ny­mi ten tekst za­wie­ra łącz­ni­ki wsta­wio­ne w kod stro­ny.

Po­dob­ny ba­ła­gan pa­nu­je w te­ma­cie li­ga­tur. Naj­czę­ściej chy­ba spo­ty­ka­ną li­ga­tu­rą w ję­zy­kach euro­pej­skich jest „fi”. Jed­nak to, czy zo­ba­czy­my tu dwie od­dziel­ne li­te­ry, czy li­ga­tu­rę, za­le­ży od wie­lu czyn­ni­ków...

• Prze­glą­dar­ka. Fire­fox i Sa­fa­ri auto­ma­tycz­nie wy­szu­ku­ją w tek­ście po­ten­cjal­ne wy­stą­pie­nia li­ga­tur i wsta­wia­ją je. Chro­me te­go nie ro­bi. W związ­ku z tym tu­taj w Chro­me li­ga­tu­ry nie bę­dzie, a w Fire­fo­ksie i Sa­fa­ri bę­dzie: fi. Moż­na też jaw­nie wsta­wić li­ga­tu­rę ja­ko znak Uni­co­de 64257 i tu tak­że i Chro­me ją po­ka­że: fi. Oso­biś­cie nie­spec­jal­nie mi się auto­ma­tyzm Fire­fok­sa po­do­ba, w blo­ku teks­tu li­ga­tu­ry nie są wy­mo­giem i uży­wa się ich ra­czej w tekś­cie oz­dob­nym, np. w tytułach.
• Uży­ta czcion­ka. Czcion­ki bez­sze­ry­fo­we (np. Arial czy Ver­da­na) naj­czę­ściej nie ma­ją li­ga­tur. Sze­ry­fo­we za­zwy­czaj ma­ją, ale nie każ­da mu­si. Do­dat­ko­wo w czcion­kach True/­Open­Type li­ga­tu­ra czę­sto nie jest od­dziel­nym zna­kiem, ale jest od­po­wied­nio skła­da­na z ele­men­tów. Na przyk­ład ten blog uży­wa czcion­ki Ro­bo­to Slab. W wy­ka­zie zna­ków czcion­ki, li­ga­tu­ry „fi” nie ma, co nie przesz­ka­dza Sa­fa­ri i Fire­fok­so­wi jej ra­doś­nie wy­ge­ne­ro­wać.
• Pod­zbiór zna­ków. Czcion­ki po­bie­ra­ne z sie­ci, na przyk­ład z Google Fonts, za­zwy­czaj opty­ma­li­zu­je­my, ogra­ni­cza­jąc zes­taw zna­ków. I tu cie­ka­wost­ka. Brak zna­ku li­ga­tu­ry nie przesz­ka­dza w wy­ge­ne­ro­wa­niu jej auto­ma­tycz­nie, na­to­miast przesz­ka­dza, je­że­li wsta­wi­my ją jaw­nie – wte­dy zo­sta­nie pod­sta­wio­na przez prze­glą­dar­kę z in­nej czcion­ki...

Na szczę­ście nie­chcia­nej auto­ma­tycz­nej li­ga­tu­ry moż­na się po­zbyć. Słu­ży do te­go spec­jal­ny znak Uni­co­de, Zero Width Non-Joiner. Wsta­wie­nie go mię­dzy zna­ki li­ga­tu­ry roz­bi­ja ją, przez co na­wet Sa­fa­ri i Fi­re­fox po­ka­żą ją ja­ko dwa zna­ki: f‌i.

Te­raz do­cho­dzi­my wresz­cie do te­go co ma­ją ze so­bą wspól­ne­go li­ga­tu­ry i łącz­ni­ki op­cjo­nal­ne. Otóż w sil­ni­ku Web­Kit był swe­go cza­su błąd po­le­ga­ją­cy na po­ja­wia­niu się „krza­ków” w tekś­cie, w któ­rym jed­no­cześ­nie uży­to li­ga­tur i mięk­kich prze­nie­sień. Błąd zo­stał ni­by daw­no te­mu po­pra­wio­ny, ale Sa­fa­ri z iOS 9.2.3 oraz Sa­fa­ri 9.1 z OS X wciąż go mają. Oto tes­ter:

fi­nal­nie czy­ta­my ma­sę krza­ków tu­taj

Pro­blem moż­na roz­wią­zać na trzy spo­so­by, w za­leż­noś­ci od te­go czy osta­tecz­nie chce­my mieć tu li­ga­tu­ry czy nie. Po pierw­sze moż­na roz­bić li­ga­tu­rę wspom­nia­nym wy­żej zna­kiem ZWNJ:

f‌i­nal­nie czy­ta­my ma­sę krza­ków tu­taj

Po dru­gie moż­na za­bro­nić prze­glą­dar­ce auto­ma­tycz­ne­go wsta­wia­nia li­ga­tur uży­wa­jąc CSS: font-vari­ant-lig­a­tures: no-com­mon-lig­a­tures;

fi­nal­nie czy­ta­my ma­sę krza­ków tu­taj

Po trze­cie wresz­cie, je­że­li li­ga­tu­ra jest po­żą­da­na, wsta­wia­my ją jaw­nie ja­ko je­den znak:

fi­nal­nie czy­ta­my ma­sę krza­ków tu­taj