Oddělení znaku a diakritiky v HTML

[drtinová]

je možné nějak v HTML udělat, aby se znak a jeho diakritické znaménko zobrazily jinak?
Například zápis pro á pomocí znaku "a" a entity utf-8 háček kompozitní: a&#x0301;, tak něco takovéhleho <font color=red>a</font><font color=aqua>&#x0301;</font>,
napadá mě napsat ten znak jednou bez diakritiky a dát mu position absolute  a podruhé s diakritikou, tak, aby znaky byly překryté, ale je to takový hack, a navíc je možné, že u některých znaků nebude překrytí správné, protože budou mít jinačí rozměr.

[Reklama]

[Lol Phirae]

Jen dvě barvy? Není to málo?

[Filip Jirsák]

Jinak než hackem to nepůjde. Překrytí nikdy nebude samo o sobě správné, protože každá dvojice znak plus diakritické znaménko by měla být v daném písmu vyladěná, čehož nedosáhnete, kdy se to zobrazí jako složenina dvou znaků. Nepoužíval bych absolutní pozicování, ale CSS pseudoelement :after a vlastnost content:

Kód: [Vybrat]

<style>
.acute, .caron {
  color: red;
}

.acute:after, .caron:after {
  color: blue;
  margin-left: -1ex;
}

.acute:after {
  content: '́';
}

.caron:after {
  content: '̌';
}

</style>

h<span class="acute">a</span><span class="caron">c</span>ek

Nebo si s tím můžete pohrát a udělat si styl pro každý znak zvlášť a doladit přesné umístění háčků, čárek a kroužku.

[Boo]

http://jsfiddle.net/viphalongpro/u7nLz/2/
http://johndyer.name/coloring-hebrew-vowels-and-accents-in-htmlcss/

Nic ale neni 100% perfektni ve vsech prohlizecich. Jeste me napada jeden trik. Pouzijes stejne pismeno 2x nad sebou. Spodni v barve, vrchni cerne ale s nastavenym stylem tak aby bylo zhora orezano tak aby hacek/carka nebyla videt. Nevyhodou je, ze to budes muset udelat pro kazde pismeno a kazdy font a velikost zvlast.

[Filip Jirsák]

Nic ale neni 100% perfektni ve vsech prohlizecich. Jeste me napada jeden trik. Pouzijes stejne pismeno 2x nad sebou. Spodni v barve, vrchni cerne ale s nastavenym stylem tak aby bylo zhora orezano tak aby hacek/carka nebyla videt. Nevyhodou je, ze to budes muset udelat pro kazde pismeno a kazdy font a velikost zvlast.

Ani není nutné vkládat tam ty znaky dvakrát. Stačí použít CSS background-clip: text a nastavit těm znakům dvoubarevné pozadí tak, aby znak byl podložený jednou barvou a diakritické znaménko druhou. Buď přes obrázek, nebo by to mělo jít udělat i přes gradient s ostrým přechodem. Případně se stejného efektu dá docílit v SVG, ale dneska už myslím background-clip umí všechny relevantní prohlížeče.

[Reklama]

[David1234]

Zkuste se zeptat ze - https://diskuse.jakpsatweb.cz/, tam se přímo specializují na tvorbu webu.

[borekz]

1. V HTML to nejde, protože pro zadání barvy musíš použít samostatný html prvek a přes více prvků asi nejde zobrazit jeden kompozitní znak.
2. I kdyby to šlo v HTML definovat, prohlížeč na Windows to nezobrazí, protože ovladač grafické karty dostává indexy glyphů ve fontu, ne unicode a jeden glyph nemůže mít víc barev. Odhaduji, že ostatní operační systémy to mají stejné. To je i důvod, proč některé fonty (např. Lucida Console) nemají kompletní češtinu. Kdyby grafická karta vykreslovala čárky a háčky zvlášť, měly by češtinu všechny fonty.

[Filip Jirsák]

1. V HTML to nejde…
2. I kdyby to šlo v HTML definovat, prohlížeč na Windows to nezobrazí…

Tohle mne nepřestává fascinovat. V dotazu a komentářích jsou popsané čtyři různé funkční způsoby, jak to udělat, což ale některým nezabrání, aby napsali, že to nejde.

[Bubák]

Dá se to udělat i provozuschopné od IE5.5 včetně, nevýhodou jsou dva znaky za sebou, bez diakritiky a s diakritikou a bez "ladění" pro každé písmo, velikost písma a písmeno. Problém bude malé i.
http://kod.djpw.cz/fijc- ukázka
http://kod.djpw.cz/fijc živá ukázka s kódem

Čistší způsob je generovaný obsah, funkční od IE9 včetně.
http://kod.djpw.cz/gijc- ukázka
http://kod.djpw.cz/gijc živá ukázka s kódem

[Filip Jirsák]

Malé í řeší znak „dotless i“ – ı, který je právě pro tyhle účely v Unicode – U+0131, HTML entita &#305; resp. &#x131;

[aaa]

Dá se to udělat i provozuschopné od IE5.5 včetně, nevýhodou jsou dva znaky za sebou, bez diakritiky a s diakritikou a bez "ladění" pro každé písmo, velikost písma a písmeno. Problém bude malé i.
http://kod.djpw.cz/fijc- ukázka
http://kod.djpw.cz/fijc živá ukázka s kódem

Ten top: 0px; mi tam robi bordel, je to aspon u mna o 3px nizsie. Bez neho alebo s autom to funguje.

[Unknown]

Malé í řeší znak „dotless i“ – ı, který je právě pro tyhle účely v Unicode – U+0131, HTML entita &#305; resp. &#x131;

Jste si jist ze jde "prave o tyto ucely"

https://cs.wikipedia.org/wiki/I_bez_te%C4%8Dky

[Unknown]

1. V HTML to nejde…
2. I kdyby to šlo v HTML definovat, prohlížeč na Windows to nezobrazí…

Tohle mne nepřestává fascinovat. V dotazu a komentářích jsou popsané čtyři různé funkční způsoby, jak to udělat, což ale některým nezabrání, aby napsali, že to nejde.

Vsechny ctyri popsane zpusoby pouzivaji CSS, jak to presne koliduje s vetou "v HTML to nejde" ?

[borekz]

Vsechny ctyri popsane zpusoby pouzivaji CSS, jak to presne koliduje s vetou "v HTML to nejde" ?

1. máš pravdu, v čistém html ten hack s pozicí nejde. Já jsem ale myslel HTML s CSS.
2. Filip Jirsák odstranil informaci, co podle mě nejde. Psal jsem o jednom kompozitním znaku, jak je to v prvním příspěvku, bez toho hacku se dvěma znaky. S hackem to samozřejmě jde, ale to už zmiňoval tazatel(ka). Navíc překrytí v ukázkách u mě ve Firefoxu není 100%, přesně jak varuje první příspěvek.

[Filip Jirsák]

Vsechny ctyri popsane zpusoby pouzivaji CSS, jak to presne koliduje s vetou "v HTML to nejde" ?

Když se používá „HTML“, obvykle se tím myslí webové technologie – HTML+CSS+JavaScript a další. Použila to tak už tazatelka hned na začátku, nebyl žádný důvod myslet si, že to chce v čistém HTML (což je ten termín, který se používá, pokud někdo chce zdůraznit, že myslí jen HTML bez dalších technologií).