/* ══════════════════════════════════════════════════════════════════════════ arabic.css , ladowany WYLACZNIE na /ar (verbatim.blade.php). No-op dla pozostalych jezykow, bo kazdy selektor jest przypiety do html[lang="ar"]. Wchodzi PO rtl.css i dlatego wygrywa kaskade tam, gdzie musi. Podzial pracy miedzy tymi dwoma arkuszami: rtl.css odbija uklad. 656 z 659 linii jest przypietych do [dir="rtl"], wiec arabski dziedziczy je w calosci z chwila, gdy dostanie dir="rtl". arabic.css robi to, czego rtl.css nie zalatwia, bo bylo pisane pod hebrajski: kroj z pismem arabskim, zerowe rozstrzelenie, wyzszy wiersz i wiekszy stopien pisma. Trzy rzeczy, ktore ten arkusz musi zrobic, i powod kazdej: 1. KROJ. Poppins nie ma pisma arabskiego (Google Fonts API wystawia dla niego latin, latin-ext i devanagari). Gorzej: rtl.css ustawia dla [dir="rtl"] rodzine 'Heebo', a Heebo ma zakres hebrajski i lacinski. Bez tego arkusza kazda arabska litera spadalaby na kroj systemowy i strona zmienialaby charakter, dokladnie tak jak przy cyrylicy. 2. ROZSTRZELENIE. letter-spacing na arabskim ROZBIJA POLACZENIA LITER. Arabski pisze sie lacznie i rozstrzelony wyglada jak zepsuty tekst, a nie jak ozdobny naglowek. Projekt serwisu rozstrzela naglowki, przyciski, etykiety i wstegi, wiec zerujemy to wszedzie. 3. WIERSZ I STOPIEN. Litery arabskie maja wydluzenia w gore i w dol czesciej niz lacinskie, wiec przy tej samej wysokosci wiersza tekst sie zlepia. Wiersz idzie na 1.8, stopien pisma w gore. Blok @font-face nizej generuje DANE/_AR6-font-cairo.cjs. Nie poprawiac go recznie: przy kolejnym uruchomieniu narzedzia zmiany znikna. ══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cairo-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cairo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cairo-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cairo-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cairo-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cairo-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cairo-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cairo-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/cairo-800-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/cairo-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ══════════════════════════════════════════════════════════════════════════ 1. KROJ ══════════════════════════════════════════════════════════════════════════ */ /* Cairo dla wszystkiego, z Poppins jako zapasem dla wysp lacinskich, gdyby lacinski podzbior Cairo sie nie doczytal. 'Heebo' z rtl.css zostaje nadpisane, bo ten selektor jest bardziej szczegolowy (html[lang="ar"]) i arkusz wchodzi pozniej. */ html[lang="ar"], html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] .nav-logo, html[lang="ar"] .footer-logo { font-family: 'Cairo', 'Poppins', system-ui, sans-serif; } /* ══════════════════════════════════════════════════════════════════════════ 2. ZEROWE ROZSTRZELENIE ══════════════════════════════════════════════════════════════════════════ */ /* Reguly rozstrzelenia siedza w dziewieciu arkuszach i w atrybutach style, wiec zamiast przepisywac ich liste (a przy kazdej nowej sekcji zapominac o jednej) zerujemy je pod korzeniem arabskim. Zakres jest bezpieczny: ten arkusz wchodzi TYLKO na /ar, a rozstrzelenie to jedyna wlasciwosc, ktorej arabski nie moze miec w zadnym miejscu. */ html[lang="ar"] * { letter-spacing: 0 !important; word-spacing: normal; } /* ══════════════════════════════════════════════════════════════════════════ 3. WYSOKOSC WIERSZA I STOPIEN PISMA ══════════════════════════════════════════════════════════════════════════ */ /* rtl.css daje [dir="rtl"] body font-size 1.02em i line-height 1.65, czyli ustawienie dobrane pod hebrajski. Arabski potrzebuje wiecej obu. */ html[lang="ar"] body { font-size: 1.06em; line-height: 1.8; } /* Tekst ciagly: 1.8 to minimum z karty jezyka. */ html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] dd, html[lang="ar"] blockquote, html[lang="ar"] figcaption, html[lang="ar"] td, html[lang="ar"] .faq-a, html[lang="ar"] .prose { line-height: 1.9; } /* Naglowki przy wierszu 1.9 rozjezdzaja sie na trzy ekrany, wiec dostaja wlasna wartosc: nizsza niz tekst ciagly, ale wyzsza niz lacinskie 1.1-1.2, bo arabskie wydluzenia w gore i w dol sa czestsze. */ html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { line-height: 1.45; } /* ══════════════════════════════════════════════════════════════════════════ 4. WERSALIKI, KTORE PRZESTAJA DZIALAC ══════════════════════════════════════════════════════════════════════════ */ /* Arabski nie ma duzych i malych liter. Wszedzie, gdzie projekt wyroznia element wersalikami (wstegi, znaczki, nadtytuly, etykiety przystankow), po arabsku ten sposob wyroznienia znika bez sladu: text-transform nie ma na czym zadzialac. Zastepujemy go tym, co dziala w kazdym pismie, czyli grubszym rysunkiem liter. TUTAJ NIE WOLNO USTAWIAC `font-size`. Stalo tu `font-size: 1.06em` i to byl blad: `em` liczy sie od RODZICA, nie od wlasnego stopnia elementu. Wymienione klasy maja wlasny stopien w `rem`, wiec regula go NADPISYWALA wartoscia wzieta z pojemnika. Zmierzone na produkcji, telefon 430 px: .badge-tickets na / rodzic 72 px -> 76.3 zamiast 10.9 (7 razy) .badge-tickets na /tour/... rodzic 56 px -> 59.4 zamiast 10.4 (5.7 razy) .section-tag, .stat-label, .badge-live, .ride-stops-label, .route-stops-label, .cro-glance-k rodzic 17 px -> 18 zamiast 11-12 (1.5-1.65) Znaczek „التذاكر ضمن السعر" mial przez to 292x420 px i zakrywal cale zdjecie karty. Dziewiec z dziesieciu zmierzonych znaczkow bylo za duzych. Podbicia stopnia nie da sie zapisac w CSS bezpiecznie, bo nie istnieje jednostka „o 6% wiecej niz wlasny stopien", a stopnie tych klas roznia sie miedzy stronami i progami (10.4, 10.9, 11.2, 11.5, 11.6, 12, 16 px). Sam `font-weight: 800` wystarcza za wersaliki. Pilnuje tego DANE/_AR31-uklad-ar-kontra-en.cjs, punkt A. Lista klas jest ta sama, ktora rtl.css wymienia przy zerowaniu rozstrzelenia, czyli nie jest wymyslona tutaj po raz drugi. */ html[lang="ar"] .hero-badge, html[lang="ar"] .section-tag, html[lang="ar"] .stat-label, html[lang="ar"] .badge-tickets, html[lang="ar"] .badge-live, html[lang="ar"] .ride-card-ribbon, html[lang="ar"] .ride-stops-label, html[lang="ar"] .route-stops-label, html[lang="ar"] .tour-hero-eyebrow, html[lang="ar"] .route-card-new-badge, html[lang="ar"] .route-card-duration-badge, html[lang="ar"] .cro-glance-k { font-weight: 800; } /* ══════════════════════════════════════════════════════════════════════════ 5. WYSPY LACINSKIE ══════════════════════════════════════════════════════════════════════════ */ /* Numer telefonu, „PLN", „Wi-Fi", adres poczty i godzina wstawione w arabskie zdanie przeskakuja na zle miejsce. To nie usterka czcionki, tylko algorytm dwukierunkowy Unicode robiacy dokladnie to, co ma robic: https://www.unicode.org/reports/tr9/ Rozwiazanie w tresci to znaki izolacji U+2066 i U+2069 wpisane w tekst, bo dzialaja takze wtedy, gdy tekst wstawia JavaScript przez textContent, a znacznik wtedy nie zadziala (trafi na strone jako widoczny napis). Ponizsze reguly domykaja to od strony arkusza dla elementow, ktore MAJA wlasny znacznik i nie przechodza przez textContent: numer telefonu w stopce i w pasku, adres poczty. */ /* `:not(...)` wycina odnosniki, ktore sa POJEMNIKAMI, a nie samym numerem. `direction` na pojemniku flex odwraca kolejnosc jego dzieci, wiec ikona ladowala po lewej: zmierzone na /ar, wiersze „الهاتف" i „البريد الإلكتروني" mialy ikone po lewej, a „WhatsApp" i adres po prawej, bo tylko te dwa pasowaly do `tel:` i `mailto:`. `.grp-alt__call` to ikona plus napis „اتصلوا بنا", bez numeru, wiec ta regula nie dawala tam nic poza szkoda. Numer w wierszu kontaktu izoluje osobna regula `[dir="rtl"] .contact-item span` w rtl.css. Pilnuje tego DANE/_AR31-uklad-ar-kontra-en.cjs, punkt B. */ html[lang="ar"] a[href^="tel:"]:not(.contact-item):not(.grp-alt__call):not(.dt-btn), html[lang="ar"] a[href^="mailto:"]:not(.contact-item):not(.grp-alt__call):not(.dt-btn), html[lang="ar"] .whatsapp-number, html[lang="ar"] .price-amount, html[lang="ar"] time { direction: ltr; unicode-bidi: isolate; } /* ══════════════════════════════════════════════════════════════════════════ 6. FORMULARZE ══════════════════════════════════════════════════════════════════════════ */ /* Pola tekstowe dziedzicza kierunek po dokumencie, ale podpowiedz w pustym polu (placeholder) bywa wyrownana do lewej, bo przegladarka bierze ja z wlasnego stylu. */ html[lang="ar"] input::placeholder, html[lang="ar"] textarea::placeholder { text-align: right; } /* ── Kwoty ────────────────────────────────────────────────────────────── Zmierzone na zrzutach: cena zlozona z JEDNEGO wezla tekstowego („400 PLN") renderuje sie poprawnie, bo algorytm dwukierunkowy traktuje cyfry z lacinka jako jeden odcinek od lewej. Cena rozbita na DWA elementy (`150 PLN`) juz nie: pojemnik jest od prawej, wiec przestawia te dwa pudelka i na ekranie wychodzi „PLN 150". Widac to bylo na dwoch stronach naraz: „PLN 400" w widecie wycieczki i przekreslona cena „PLN 149" na stronie meleksa, podczas gdy cena po rabacie w tym samym wierszu byla poprawna. Zamykamy kwote we wlasnym odcinku od lewej. Etykieta „للشخص" stoi w osobnym elemencie i zostaje arabska, bo `unicode-bidi: isolate` dziala tylko na zawartosc pudelka, nie na jego sasiadow. */ html[lang="ar"] .widget-price, html[lang="ar"] .modal-price, html[lang="ar"] .mobile-sticky-price, html[lang="ar"] .pcard-price, html[lang="ar"] .route-img-price, html[lang="ar"] .price-old, html[lang="ar"] .price-new, html[lang="ar"] .hpb-price, html[lang="ar"] .tour-price, html[lang="ar"] .mr-price__old, html[lang="ar"] .mr-price__new, html[lang="ar"] .hpa-main, html[lang="ar"] .hpa-old, html[lang="ar"] .hpb-old, html[lang="ar"] .hpb-main, html[lang="ar"] [data-melex-price] { direction: ltr; unicode-bidi: isolate; } /* Wiersz „Razem: 300 PLN" ma arabska etykiete PRZED kwota, wiec caly wiersz musi zostac od prawej. Izolujemy sama kwote, ktora siedzi w . */ html[lang="ar"] .live-price { direction: rtl; } html[lang="ar"] .live-price strong { direction: ltr; unicode-bidi: isolate; } /* Pole daty i telefonu zostaja lacinskie: obie wartosci sa liczbowe i czytane od lewej takze przez Arabow. */ html[lang="ar"] input[type="date"], html[lang="ar"] input[type="time"], html[lang="ar"] input[type="tel"], html[lang="ar"] input[type="email"] { direction: ltr; text-align: right; }