Karakters soms niet zichtbaar in Windows browsers

[Anoniem: 271404]

Tijdens een experiment met LaTeX en web technologieën ben ik op een vreemde bug vastgelopen. Eerst licht ik het experiment toe, geef ik een testcase en tot slot enkele resultaten.

Met het experiment wou ik aantonen dat algrabraïsche vergelijkingen konden worden weergegeven in enkel HTML, JavaScript en CSS. Een bestaande methode genaamd MathML (ook van de W3C Group) werkt niet out-of-the-box in Internet Explorer (enkel via een addon: MathPlayer) en is om die reden geen optie. Een andere bekende oplossing is het gebruik van afbeeldingen, wat bijvoorbeeld Wikipedia doet. Maar dit is geen optie omdat de vergelijkingen voor het experiment in de browser moeten kunnen worden aangepast.

Via een blog op my.Opera.com kwam ik op een gedateerd experiment waarbij LaTeX werd omgezet in HTML. Er stonden enkele fouten in het JavaScript-bestand waardoor de pagina niet werd uitgevoerd zoals de bedoeling was. De fouten heb ik er vervolgens uitgehaald en de pagina online geplaatst voor verdere analyse: LaTeX2HTML.

Op dit moment is de bovengenoemde experiment-pagina goed te bekijken in:

Ubuntu 9.04 EN

• Firefox 3.0
• Google Chrome (alpha)
• Konqueror (KDE 4.2.2)
• Opera 9.63

Windows XP Home NL SP3

• Firefox 3.5
• Google Chrome 2.0.172.37
• Internet Explorer 8.0.6001.18702
• Safari 4.0.2
• Opera 9.64

Windows XP Pro EN SP3

• Firefox 3.5
• Google Chrome 2.0.172.37
• Opera 9.64

Het merkwaardige aan deze lijst is dat bij Windows XP Pro EN SP3 ondanks dezelfde engine (webkit) de browser Chrome wél werkt, maar Safari 4.0.2 niet. Daarnaast wordt de pagina niet goed weergegeven in IE 8.0.6001.18702IC op dezelfde Engelse Windows XP. Waar "IC" van het versienummer voor staat, is mij overigens ook niet duidelijk.

Ter verduidelijking: de pagina is niet goed weergegeven als er blokjes verschijnen op het scherm, d.w.z dat de karakters niet zijn gevonden. Ik heb enkele logische "en" en "of" tekens in de eerste alinea geplaatst, omdat die karakters voornamelijk aangeven of de andere karakters goed worden weergegeven. De tekens van de eerste alinea worden in de lettertypes "Arial Unicode MS", "Arial" en "Serif" weergegeven. Het lettertype "Arial Unicode MS" werd namelijk als oplossing aangedragen voor het weergeven van diverse unicode tekens.

Tot slot heb ik ook browsershots gebruikt om een overzicht te krijgen van diverse browsers / besturingssystemen. Zie hieronder enkele links van windows browser die de pagina wél goed weergeven:

• Windows XP - IE 5.5 (Engels)
• Windows XP - IE 6.0 (Duits)
• Windows XP - IE 7.0 (Russisch?)
• Windows XP - Safari 3.2.1 (Engels)

Nu is mijn vraag eigenlijk: Wat zorgt er voor dat de tekens in de ene Windows-omgeving wel worden weergegeven en in bijv. mijn Engelse Windows XP Pro niet?

In principe gebruik ik alleen Ubuntu, maar om crossbrowser / -platform webapplicaties te maken, test ik het ook op Windows XP. Ik beschik op dit moment niet over een Mac of Vista, dus als de pagina goed of niet goed wordt weergegeven in browsers op die platformen, hoor ik het graag! Gelieve ook de taal van het besturingssysteem vermelden. Dit helpt bij het inperken van het probleem.

Update 24-07-09 18:17:
Meer wiskundige vergelijkingen heb ik online geplaatst: http://www.vo20.nl/demo/LaTeX2HTML/v3/math.html.

[Spinal]

Vista Ultimate (x64) met Opera 10 (nieuwste build): geen rare blokjes, alles ziet er prima uit. Ook in Safari 4 (530.17) doet alles het prima, dus aan Safari lijkt het niet te liggen. Wat de reden wel is: geen idee

[Da Weef]

Sowieso is je gebruikte methode niet compatible met Internet explorer 7 en eerder. Deze ondersteunen de css property ":before {content}" niet

Verder lijkt het inderdaad een characterset probleem. Probeer bijvoorbeeld eens:

Cascading Stylesheet:

body{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

[macciez]

FYI: vista home premium met FF 3.5 en IE8 ook geen probleem

[daaan]

Lijkt me zoals hierboven al is gezegd een characterset probleem. Probeer het eens met een aantal schone installaties (je kunt gratis virtual server images downloaden van ms).

Overigens +2 voor de nette startpost.

[moozzuzz]

In WinXP-PRO NL IE 6.0.2900.2180.xpsp_sp2_gdr.090206-1233 geen vierkantjes maar echt heel erg netjes is het ook weer niet (sommige _x / ^x zitten op/te dichtbij de (letter-)symbolen). Bij nader inzien heeft je screenshot van MSIE5.5 daar ook last van (het symbool dat bij mist is & #2462; vermoed ik ).

Yields: RE = formule heeft wel vierkantjes... : t_ab L_ab dz_a ⊗ ∂z_b

Kan je er ook delingen en accolades mee maken? (LaTeX ken ik enkel van eenvoudige document-opmaak anno 2003).

[ Voor 11% gewijzigd door moozzuzz op 23-07-2009 14:02 . Reden: screens ook bekeken. ]

[Anoniem: 271404]

Ik heb nu een tweede collectie browsershots gemaakt en nu zijn de resultaten nog merkwaardiger dan bij de eerste collectie. Voor Windows XP geldt:

• De pagina ziet er in Safari 3.2.1 (Frans) goed uit, maar Safari 3.2.1 (Engels) kan de tekens niet goed weergeven.
• De pagina ziet er in Safari 4.0.2 (Russisch?) goed uit, maar Safari 4.0.2 (Engels) kan de tekens niet goed weergeven.
• De pagina ziet er in Internet Explorer 6.0 (Duits) en Internet Explorer 8.0 (Duits) goed uit. Maar Internet Explorer 7.0 (Duits) ziet er niet goed uit. De russische Internet Explorer 7.0 geeft de pagina daarintegen wel goed weer

Het lijkt er op dat de taal van het Windows platform invloed heeft op de te gebruiken tekens. Het lijkt er op dat de Engelse versie van Windows XP een kleine tekenset heeft. De Engelse taal kent geen accenten en wellicht is er daarom voor gekozen om een "ingekorte" tekenset te installeren. Dit is slechts een speculatie en ik hoor graag hoe anderen hier over denken.

Om het probleem te onderzoeken, wou ik graag vragen of enkele gebruikers konden aangeven:
- of de pagina goed wordt weergegeven.
- welke browser (en versie) wordt gebruikt.
- welke taal het besturingssysteem gebruikt.
- of er een tekstverwerker is geïnstalleerd (denk aan Open Office of MS Office ect.).

Hiermee hoop ik het probleem in te perken waardoor ik gerichter een oplossing kan zoeken. Alvast bedankt!

Da Weef schreef op donderdag 23 juli 2009 @ 11:36:
Sowieso is je gebruikte methode niet compatible met Internet explorer 7 en eerder. Deze ondersteunen de css property ":before {content}" niet.

Stom, ik was vergeten het script "IE7" van dean edwards aan de pagina toe te voegen. Indien iemand niet bekend is met dit script: het zorgt er voor dat IE 5, 6 en 7 ook CSS 2.1 ondersteunen, en dus ook ":before" begrijpen.

@ZanderZ, macciez: bedankt voor de informatie!

@daaan: Die images lijken me een goede methode om te testen. Ik ga er snel naar kijken.

@moozzuss: accolades heb ik nog niet helemaal uitgewerkt, maar delingen zijn zeker mogelijk: http://www.vo20.nl/demo/LaTeX2HTML/v2/math.html.

[ Voor 0% gewijzigd door Anoniem: 271404 op 23-07-2009 21:56 . Reden: grammatica fout ]

[Da Weef]

Ik heb alvast een leuke voor je... Ik heb twee systemen met elk Windows XP SP3 NL.

Voor zowel IE8 als Safari (4.02) geldt dat deze op het ene systeem (PC) wel goede weergave wordt geproduceerd en op het andere systeem (laptop) niet...

Wat betreft software kan het eraan liggen dat de PC (privé) tjokvol zit met de nieuwste software, terwijl de laptop (werk) het o.a. moet doen met een verouderde versie van MS Office. Overigens draaien beide systemen ook Open Office.

Ik zie overigens niet direct hoe je dit probleem netjes op zou kunnen lossen. Als er al een mogelijke patch is (bijv. in de vorm van het pluggen van een bepaalde characterset), dan zal het alsnog een crime worden om te detecteren dat een user-agent de patch nodig heeft... Vervolgens moet je dan de gebruiker nog zover krijgen ermee in te stemmen om de patch te installeren.

Waarom niet gewoon gebruik maken van een Latex converter die afbeeldingen genereert?

[Anoniem: 296939]

Anoniem: 271404 schreef op donderdag 23 juli 2009 @ 21:53:

[...]

Om het probleem te onderzoeken, wou ik graag vragen of enkele gebruikers konden aangeven:
- of de pagina goed wordt weergegeven.
- welke browser (en versie) wordt gebruikt.
- welke taal het besturingssysteem gebruikt.
- of er een tekstverwerker is geïnstalleerd (denk aan Open Office of MS Office ect.).

Hiermee hoop ik het probleem in te perken waardoor ik gerichter een oplossing kan zoeken. Alvast bedankt!


[...]

Volgens mij wordt de pagina goed weergegeven,
ik gebruik Mozilla Firefox 3.0.12 op Ubuntu 9.04 (Jaunty). De taal van het OS is Engels.
Standaard staat OpenOffice geïnstalleerd.

offtopic:
Ik moet zeggen dat ik het wek een enorm tof project vind

[4ourty2]

Word hier goed weergegeven.

Debian X64 Iceweasel 3.0 (openoffice installed)
Win 7 Firefox 3.5.1 (schone windows alleen een paar games)
Win 7 ie8 8.0.7100.0 (schone windows alleen een paar games).

verder een interessant project. Ik blijf het even volgen.

[Spinal]

Anoniem: 271404 schreef op donderdag 23 juli 2009 @ 21:53:
[...]
Om het probleem te onderzoeken, wou ik graag vragen of enkele gebruikers konden aangeven:
- of de pagina goed wordt weergegeven.
- welke browser (en versie) wordt gebruikt.
- welke taal het besturingssysteem gebruikt.
- of er een tekstverwerker is geïnstalleerd (denk aan Open Office of MS Office ect.).

Hiermee hoop ik het probleem in te perken waardoor ik gerichter een oplossing kan zoeken. Alvast bedankt!

Goed, nogmaals wat uitgebreider dan:

Windows Vista Ultimate 64-bit (Engels, NL taalpakket)
- Office 2003 geïnstalleerd

- Opera 10 (build 1651): geen problemen
- IE8: geen problemen (64 en 32-bit geprobeerd)
- FF3.5.1: geen problemen
- Safari 4 (530.17): geen problemen
- Chrome 2.0.172.37: geen problemen

En op een andere pc: Windows XP Pro SP3 NL (32-bit) met Office 2003 geïnstalleerd

- FF 3.5.1: geen problemen
- IE8: geen problemen

[ Voor 8% gewijzigd door Spinal op 25-07-2009 10:13 . Reden: +2e pc ]

[Anoniem: 271404]

Da Weef schreef op donderdag 23 juli 2009 @ 23:59:
Ik heb alvast een leuke voor je... Ik heb twee systemen met elk Windows XP SP3 NL.

Voor zowel IE8 als Safari (4.02) geldt dat deze op het ene systeem (PC) wel goede weergave wordt geproduceerd en op het andere systeem (laptop) niet...

Wat betreft software kan het eraan liggen dat de PC (privé) tjokvol zit met de nieuwste software, terwijl de laptop (werk) het o.a. moet doen met een verouderde versie van MS Office. Overigens draaien beide systemen ook Open Office.

Ik denk dat het komt doordat MS Office nieuwe fonts plaatst c.q. patcht, waardoor er meer tekens beschikbaar zijn. Wellicht speelt dit probleem alleen in Windows XP. Ik denk namelijk dat Vista en Windows 7 wel over de uitgebreidere tekensets beschikken en om die reden dus altijd de pagina goed weergeven.

Alle resultaten die ik tot nu toe van Vista heb gezien, bevestigen dat elke browser in Vista de pagina goed uitvoert. Ik hoor het graag als iemand ziet dat de pagina niet correct wordt weergegeven door een Vista- en/of Windows 7-browser.

Ik zie overigens niet direct hoe je dit probleem netjes op zou kunnen lossen. Als er al een mogelijke patch is (bijv. in de vorm van het pluggen van een bepaalde characterset), dan zal het alsnog een crime worden om te detecteren dat een user-agent de patch nodig heeft... Vervolgens moet je dan de gebruiker nog zover krijgen ermee in te stemmen om de patch te installeren.

Waarom niet gewoon gebruik maken van een Latex converter die afbeeldingen genereert?

De oplossing hangt af van het probleem. Als het probleem zich bij Windows XP, Vista en 7 voordoet, kan ik door middel van de user-agent aan de browserkant de "speciale" tekens vervangen door afbeeldingen (met JS en CSS). Het grote nadeel is dat afbeeldingen niet dynamisch zijn. Stel de achtergrond- of letterkleur is anders bij een ander deel van de website. Dat zou betekenen dat alle varianten van de afbeeldingen moeten worden aangemaakt. Dit zou wel aan de serverkant kunnen worden gegenereerd, maar de tekens blijven dan niet selecteerbaar. Ik wil namelijk een inline-editor maken en dat wordt lastiger met afbeeldingen.

Een andere oplossing is het aanbieden van een open source lettertype die de gebruiker installeert. Dit is in mijn ogen een goede oplossing als het probleem zich alleen voordoet op Windows XP. Als de meer recentere versies van het Windows-platform de pagina's wel goed weergeven, kunnen er restricties worden opgelegd aan de eindgebruikers. Het grootste gedeelte van de gebruikers werkt vanuit een school en enkelingen vanuit huis. Scholen die het project (genaamd "Voortgezet Onderwijs 2.0") gebruiken, zullen sowieso een aparte account voor toets-afname moeten maken. Het bijplaatsen van een font is dan niet het meeste werk.

Ongetwijfeld zijn er nog andere oplossingen, maar het probleem moet ik eerst helder voor ogen hebben. Je hebt immers niets aan een oplossing, als je niet weet wanneer het probleem zich voordoet.

In de startpost heb ik het misschien niet helemaal goed toegelicht, maar het doel van dit experiment is het weergeven van algrabraïsche vergelijkingen en niet het omzetten van LaTeX naar HTML. Ik heb alleen LaTeX gebruikt omdat het originele script me inspireerde. Het script toonde voor mij aan dat het mogelijk was en toen ging ik onderzoeken in welke browsers het allemaal werkte. LaTeX zou wel te gebruiken zijn voor bijvoorbeeld het opslaan van een vergelijking in een database. Maar hier denk ik nog over na.

@Rubinski_be, UlyssesNL: Bedankt voor je informatie en compliment!
Ik heb jammer genoeg geen tweakblog, anders zou ik graag over dit soort onderwerpen schrijven. Ik denk dat veel developers de mogelijkheden van HTML, CSS en JavaScript onderschatten of niet kennen. Dus als ik een blog kan aanschaffen in de tweakstore, zul je hier ongetwijfeld meer over horen

[ Voor 6% gewijzigd door Anoniem: 271404 op 24-07-2009 21:59 ]

[Da Weef]

Da Weef schreef op donderdag 23 juli 2009 @ 23:59:
Voor zowel IE8 als Safari (4.02) geldt dat deze op het ene systeem (PC) wel goede weergave wordt geproduceerd en op het andere systeem (laptop) niet...

Ik was overigens vergeten te vermelden dat Firefox 3.5.1, Opera 9.64 en Chrome 2.0.172.37 in alle gevallen wel werkten.

De oplossing hangt af van het probleem. Als het probleem zich bij Windows XP, Vista en 7 voordoet, kan ik door middel van de user-agent aan de browserkant de "speciale" tekens vervangen door afbeeldingen (met JS en CSS). Het grote nadeel is dat afbeeldingen niet dynamisch zijn. Stel de achtergrond- of letterkleur is anders bij een ander deel van de website.

Achtergrond is geen issue als je gebruik maakt van transparante png of eventueel gif. Volgens mij moet het ook mogelijk zijn de voorgrond (tekstkleur) aan te passen met bijv de php image-functies. Al heb ik daar zelf nog nooit heel veel mee gedaan.

Dit zou wel aan de serverkant kunnen worden gegenereerd, maar de tekens blijven dan niet selecteerbaar. Ik wil namelijk een inline-editor maken en dat wordt lastiger met afbeeldingen.

Is eventueel ook een mouw aan te passen door de editor zo op te zetten dat je de afbeeldingen kunt verwijderen en toevoegen (zoals bij emoticons )
Zal echter allemaal wel wat lastiger worden om te implementeren. ik snap dat je er een voorkeur voor hebt om de met tekensets op te lossen.

Goed, zoals eerder opgemerkt, het blijft een interessant experiment. Succes ermee...

[Anoniem: 296939]

Ik kijk iig al uit naar je TB

[Anoniem: 271404]

daaan schreef op donderdag 23 juli 2009 @ 12:55:
Lijkt me zoals hierboven al is gezegd een characterset probleem. Probeer het eens met een aantal schone installaties (je kunt gratis virtual server images downloaden van ms).

Een half jaar terug had ik die images gebruikt, maar nu biedt microsoft alleen images aan die gedraaid kunnen worden op Windows 7. Omdat ik niet over Windows 7 beschik, zijn de images geen mogelijkheid meer.

Da Weef schreef op zaterdag 25 juli 2009 @ 12:26:
Achtergrond is geen issue als je gebruik maakt van transparante png of eventueel gif. Volgens mij moet het ook mogelijk zijn de voorgrond (tekstkleur) aan te passen met bijv de php image-functies. Al heb ik daar zelf nog nooit heel veel mee gedaan.

Het is een mogelijkheid, maar ik wil uit principe niet met afbeeldingen werken. Het doet me namelijk erg aan de methode denken om eigen lettertypes te gebruiken d.m.v. een flash script. Maar als blijkt dat het de enige haalbare oplossing is, heb ik geen keus

Gelukkig heb ik wel een oplossing gevonden voor het weergeven van de tekens in het Internet Explorer. Deze fix werkt jammer genoeg niet op de windows versie van Safari, maar dit lijkt me een hele kleine groep gebruikers. De oplossing ziet er als volgt uit:

JavaScript:

(function(){
    window.onload = function() {
        var elements = document.getElementsByTagName('span'),
            e = 0
            symbols = [],
            s = 0;
    
        symbols[unescape('%u2227')] = '&'+'#217;'; // Zonder het plus-teken worden in
        symbols[unescape('%u2228')] = '&'+'#218;'; // dit bericht unicode tekens weer-
        symbols[unescape('%u2295')] = '&'+'#197;'; // gegeven in plaats van de entities
 
        for( e in elements ) {
            if( (' '+elements[e].className+' ').indexOf(' op ') > -1 ) {
        
                html = elements[e].innerHTML;
        
                for( s in symbols ) {
                    html = html.replace(s, '<span class="sym">'+ symbols[s] +'</span>');
                }
    
                elements[e].innerHTML = html;                   
            }
        }
    };
})();

En het script wordt aangeroepen door de volgende HTML code:

HTML:

<!--[if lte IE 8]>
    <style>.sym {font-family:symbol}</style>
    <script src="math-ie-fix.js"></script>
<![endif]-->

Alle tekens die niet goed worden weergegeven in Internet Explorer, kunnen vaak wel worden weergegeven door middel van het Symbol-lettertype. Ik heb de volgende tabel gebruikt voor de omzetting van de tekens: http://www.alanwood.net/demos/symbol.html#s2200. Deze methode (zonder conditional comments) werkt jammer genoeg niet bij Safari.

Tot slot heb ik Matrices en wortelfuncties toegevoegd aan de demonstratie pagina. Er zijn nog veel meer combinaties mogelijk. Nu ben ik aan het onderzoeken of het goed mogelijk is om allemaal verschillende functies binnen andere functies (een som binnen een wortel bijv.) te gebruiken.

De volgende functies zijn nu in HTML en CSS weer te geven:

• Binomiaal
• Integraal
• Limiet
• Matrix
• Wortel
• Som
• Machten
• Optellen, aftrekken, vermenigvuldigen en delen

Ik denk dat mijn probleem voor het weergeven van karakters in windows browsers nu voor het grootste deel is opgelost. Safari (windows) is de enige browser die de tekens niet kan weergeven en daarom bestempel ik het probleem voor nu als 'opgelost'. Als iemand een oplossing voor de windows versie van Safari vind, hoor ik het graag!

[ Voor 3% gewijzigd door Anoniem: 271404 op 29-07-2009 12:24 ]

[moozzuzz]

Ter feedback:

Matrix example:de linker "accolade" van de matrix ziet er niet zo goed uit in IE6 (WinXP-PRO NL IE 6.0.2900.2180.xpsp_sp2_gdr.090206-1233). Het is wat moeilijk uit te leggen.

code:

expected:
+-
|   1
|
|   2
+-

in IE6
+   -  <-- zijn tevens balkjes à la &#8855; maar dan gevuld)
|   1
|
|   2
+-     <-- zijn tevens balkjes à la &#8855; maar dan gevuld)

Mooi resultaat overigens!

Sum example:
* (...)dz a ⊗ ∂ z b (nog steeds een vierkantje tussen a en ∂)
* laatste voorbeeld heeft niets tussen de haakjes (wel erboven/eronder)

[ Voor 17% gewijzigd door moozzuzz op 30-07-2009 10:18 . Reden: Sum example ]

[Da Weef]

Ziet er goed uit inderdaad!

Overigens geeft IE6 (WinXP Pro NL SP3, IE6 van MultipleIES package) bij mij zelfs een heleboel problemen:
-matrix zoals hierboven
-geen wortelteken
-geen breuklijn
-geen product-teken
-geen integraal-teken
-etc.
Eigenlijk werkt er nagenoeg niets in mijn versie van IE6

IE8 (8.0.6001.18702 ) ziet er daarentegen een stuk beter uit, enkel product tekens werken niet. Zowel het in-product als het uit-product.
Verder valt zoals hierboven wordt aangegeven in het laatste voorbeeld de inhoud enigszins buiten de haakjes (boven/onder)

Overigens ziet het er in Safari (4.02) nu ook prima uit. Bovenaan pagina (onder examples) nog wel blokjes, maar verder wordt álles goed weergegeven.

EDIT: Te snel gejuicht, in Safari is linker matrix 'accolade' geen haakje maar een rechte lijn.

[ Voor 32% gewijzigd door Da Weef op 30-07-2009 11:31 ]