Programim dhe zhvillim, javascript, python, php, html

Paraqitja e tekstit në hije të Google Chrome

Google Chrome ka një defekt jashtëzakonisht të bezdisshëm në zbatimin e tij të CSS3 text-shadow. Antializimi i nënpikselit çaktivizohet kur aplikohet hija e tekstit. Asnjë sasi e -webkit-font-smoothing nuk do ta bindë atë të kundërtën. Anti-alias i papërpunuar i kanalit alfa çon në përzierjen e hijeve me shkronjat dhe kjo së bashku me tekstin e pikseluar përfundon duke prodhuar një pamje shumë të shëmtuar. Kjo është edhe më e dukshme nëse përdoren fontet e shkrimit me dorë, si p.sh. Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130

Një nga vendet ku mund ta shihni qartë këtë është në Twitter - http://dev.twitter.com/pages/auth. Teksti-hija përdoret për skicën e tekstit atje: shikoni faqen në Chrome, krahasoni me FF ose IE, do të shihni sa keq është.

Efekti përkeqësohet edhe më shumë me tekstin më të vogël derisa e bën atë plotësisht të palexueshëm. Diskutimi teknik i problemit është i disponueshëm këtu: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

Ka një gabim të dorëzuar në projektin Chromium (çështja 23440). Ky gabim ka ekzistuar rreth më shumë se një vit dhe ende nuk i është caktuar askujt. Zhvilluesit e Google e panë atë, vendosën se nuk ishte aq e rëndësishme dhe e lanë në moshë. Rezulton se ata rregullojnë vetëm defektet "popullore", një praktikë kaq e çalë sa duket mbresëlënëse! Jam shumë i zhgënjyer me Chrome! Tipografia e uebit dhe CSS3 përdoren nga gjithnjë e më shumë njerëz çdo ditë për ta bërë ueb-in një vend shumë më të bukur! Është për të ardhur keq që ekziston një çështje e tillë për ta ngadalësuar atë.

Pra, nevojitet një përpjekje publike për të rregulluar këtë. Tregojuni të tjerëve për këtë, shkruani në bloget tuaja. Mund të shkoni te http://code.google.com/p/chromium/issues/detail?id=23440 dhe votoni për çështjen. Ju mund ta bëni këtë duke klikuar në yllin që ndodhet në anën e sipërme të majtë të faqes (kërkohet një lloj llogarie Google - gmail, etj).

Për t'i bërë gjërat më të qarta - pyetja ime ka dy qëllime:

  1. Gjeni një zgjidhje teknike.
  2. Lëreni Google të rregullojë problemin në Chrome.

Unë do të votoj çdo lidhje të postuar në një artikull në lidhje me këtë çështje dhe do të shënoj si të pranuar zgjidhjen më të mirë teknologjike ose përpjekjen publike.

google-chrome css
28.10.2010

Përgjigjet:


1

Rregullimi i @sebastian mund të mos funksionojë për versionet e vjetra të Chrome.
Pamja e ekranit nën "Iron Browser" (Chromium fork) v3.0.197.0:

Të gjithë atyre që u është caktuar një hija duket e njëjtë dhe -webkit-font-smoothing nuk ka asnjë efekt si edhe -webkit-text-stroke.

Në vend të kësaj, unë kam eksperimentuar derisa kam dalë me këtë rregullim: http://jsbin.com/acalu4

tldr: shtoni një 0 0 0 transparent, të padëmshme përpara hijeve tuaja të tjera.

Çështje të njohura: disa shfletues mund të trajtojnë vetëm 1 text-shadow. Për të mos ndikuar tek ata (duke vrarë hijet e tyre të vetme), kjo duhet të zbatohet përmes javascript vetëm në Chrome.

28.01.2011
  • Faleminderit :) e zgjidhi problemin tim. Cilët shfletues mund të trajtojnë vetëm një text-shadow? Nëse është pakicë, unë nuk do të mbroja përdorimin e javascript për ta zbatuar këtë. 26.08.2011
  • Kjo më shqetësoi gjithashtu, derisa pashë këtë përgjigje dhe e rregulloi atë -- pastaj qesha me zë të lartë. Faleminderit njeri! 16.11.2011
  • @JGarrido Ke te drejte. Fatkeqësisht Google e rregulloi gabimin dhe më pëlqeu sepse madhësitë më të mëdha të shkronjave dukeshin më të buta me hije në Windows :( Duket se ka probleme të tjera që lidhen me hijet e tekstit, shikoni në komentet këtu (si p.sh. ky). 02.12.2011
  • @Ben Ndoshta keni të drejtë, unë di vetëm se Safari 3 nuk mbështet hije të shumta teksti. Për mua kjo përfaqëson të njëjtën bazë përdoruesi sikur të ishte diçka si MSIE 4.0. 02.12.2011

    • 2

    pjesa e parë (zgjidhja teknike): Duke i dhënë tekstit një goditje të hollë.

    provoni këtë css, mund t'ju duhet të ndryshoni vlerat për të marrë efektin e dëshiruar.

    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

    vetëm shfletuesit e ueb-kit (Chrome, Safari) e lexojnë atë, kështu që nuk do të ndikojë në FF ose IE.

    luaj me një shembull këtu: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

    23.11.2010
  • Na vjen keq të them se nuk funksionon. -webkit-font-smoothing: subpixel-antialiased; gjithsesi është i paracaktuar, vendosja e tij në antialiased nuk duket të bëjë ndonjë ndryshim. webkit-text-stroke është vizatuar në të vërtetë BRENDA tekstit, shkronjat janë shumë të holla, dhe kështu asgjë nuk duhet t'i bëjë ato më të holla. Problemi aktual që kam me Chrome është se hija është hedhur mbi shkronjat fqinje në vend që të jenë pranë tyre siç duhet. Unë do të përditësoj pyetjen time. 24.11.2010
  • funksionon.. në Mac: christophzillgens.com/en/articles/ 25.11.2010
  • Ndoshta funksionon për ta bërë tekstin më të lexueshëm, por problemi im në fakt nuk është me tekstin, por me hijen e tij. Pa tekst-hije teksti nëse është krejtësisht në rregull. Dhe po, antialiased nuk ka ende asnjë efekt në Windows. 25.11.2010
  • @Avok: përdorimi i text-stroke është zgjidhja e vetme që mund të mendoj për ta bërë tekstin më të lexueshëm. është turp që deklarata e tekstit-stroke nuk na lejon të specifikojmë se si të vendosim goditjen e tekstit (brenda, jashtë, në qendër). ai është i përqendruar si parazgjedhje. Megjithatë, ai e bën tekstin më të lexueshëm, apo jo? 25.11.2010
  • Ju duhet të hiqni hijen në mënyrë që goditja e tekstit të jetë e mirë. Do ta bënte tekstin më të lexueshëm në një sfond me kontrast të ulët nëse mund ta specifikoja me trashësi të mjaftueshme. Por nuk mundem për fat të keq, pasi shkon brenda tekstit. Nuk e di se çfarë kuptoni me qendër? A duhet të jetë në mes të një letre? 25.11.2010

    • 3

    Kam gjetur një zgjidhje për këtë. Duket se funksionon në Safari 4+, Chrome (testuar në 8.0x) dhe Firefox 3.5.

    Provoje:

    text-shadow: 0px 0px rgba(0,0,0,0.75), 
             0px 1px rgba(0,0,0,0.75), 
             1px 0px rgba(0,0,0,0.75), 
             0px 0px rgba(0,0,0,0.75);
    16.01.2011
  • Si funksionon ky rregullim? Mund të kujdeseni të elaboroni? Duket se do të krijojë katër hije në vend të një? Cila është saktësisht zgjidhja? Katër hijet? Këto parametra të saktë, smth. si numra magjik? Çfarë ndodh me deklaratën time hije kur e shtoj këtë? A e heq? 27.01.2011
  • @avok00. Ajo që di është se kjo funksionon. Nëse nuk gabohem, secili grup po vendos hijen lart, djathtas, poshtë, majtas. Pastaj, jam i sigurt që e dini këtë, por sintaksa e hijes së tekstit përdor X-offset, Y-offset, blur dhe ngjyra (rgb dhe a për alfa natyrisht). Pra, në postimin tim më lart, ne nuk përdorim blur, sepse hija po vizatohet lart, djathtas, poshtë dhe majtas. text-shadow: TOP x-offset y-offset rgba(0,0,0,0,75), Djathtas x-offset y-offset rgba(0,0,0 ,0.75) etj... Shpresoj se kjo ndihmon dhe është mjaft e qartë! 27.01.2011
  • Jam gabim. Nuk ka të bëjë fare me lart, djathtas, poshtë, majtas, por nivele të shumta të hijes. Chris Spooner ka një grup të madh demonstrimesh këtu: line25.com/articles/. Shikoni mostrën e zjarrit! 27.01.2011
  • OK, gjithçka është në rregull, katër hije pa turbullira, por si e rregullon kjo problemin tim? Ku ta aplikoj këtë pjesë të kodit? Çfarë ndodh me hijen time të përcaktuar tashmë? A thua që ato katër hije rikrijojnë efektin e një hije me turbullim? Kur hijet nuk përdorin turbullim, a është ky një zgjidhje për gabimin e paraqitjes së nënpikselit të tekstit? Ku e keni parë atë rregullim? 27.01.2011
    • Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..