Schriftgröße bei Safari mit javascript ändern

[longterm]

Hallo, die iOS-eignen Möglichkeiten zur Verkleinerung der Schrift in Safari reichen nicht aus. Aus diesem Grund wird unter http://www.andadapt.com/howto-change-the-font-size-in-safari-on-the-ipad-and-iphone/ eine Möglichkeit beschrieben, wie man dennoch die Schrifgröße ändern kann (increase / decrease):

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(p%5Bi%5D.style.fontSize.replace(%22px%22,%22%22));%7Delse%7Bvar%20s=12;%7Ds+=2;p%5Bi%5D.style.fontSize=s+%22px%22%7D

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(p%5Bi%5D.style.fontSize.replace(%22px%22,%22%22));%7Delse%7Bvar%20s=12;%7Ds-=2;p%5Bi%5D.style.fontSize=s+%22px%22%7D

Das funktioniert relativ gut. Zeilenabstände bleiben allerdings unnötig groß. Der Unterschied zwischen den Zeilen ist lediglich +=2 vs. -=2.

Allerdings funktioniert es nicht symmetrisch. Decrease wird sehr stark verkleinern, während increase nur geringfügig vergrößert. Diese Asymmetrie ist aber nur ein Problem, und (zumindest für mich) kein allzu schwerwiegendes. Das größere Problem ist, dass die Schrift bereits bei einmaligem Ausführen oft zu klein wird. Ideal ist es oft, wenn man 1x decrease und dann 2x increase macht. Es ist dann immer noch kleiner als ursprünnglich, aber nicht zu klein.

Ich habe keine Ahnung von javascript. Gibt es irgendwelche Möglichkeiten, das Ganze noch etwas zu tweaken? Kann man mehrere Befehlszeilen dieserart unmittelbar hinteinander ausführen?

Danke sehr für eure Hilfe im Voraus. Das würde die Usability des iPhones sehr steigern. (Bitte keine Hinweise auf den Lesemodus, das hat ja viele Nachteile.)

 

[CitroenDsVier]

Erstmal zur besseren Lesbarkeit für Andere: Der Code in lesbar

javascript:
var p=document.getElementsByTagName('*');
for(i=0;i<p.length;i++){
    if(p[i].style.fontSize){
        var s=parseInt(p[i].style.fontSize.replace("px",""));
    }else{
        var s=12;
    }
    s-=2;
    p[i].style.fontSize=s+"px"
}

Das Problem wird sein, dass er nie in den if-Teil geht, sondern immer in den else-Teil.
Was du machen könntest, wäre, im else-Teil (Zeile 7) "var s" auf einen größeren Wert als 12 zu setzen, meinetwegen auf 16. Dann würdest du allerdings den Text einer Seite mit Schriftgröße 12 auch mit dem decrease-Skript vergrößern.

Ergänzung (15. Oktober 2018)

Update: Probiere mal folgenden Code:

Wesentliche Änderung ist, dass jetzt auch auf Seiten eingegangen wird, bei denen style-Attribute nicht inline (= im HTML-Code), sondern in einer eigenen Datei definiert werden. Das trifft auf quasi alle Seiten zu, die man so besucht.
Dadurch wird bei solchen Seiten nicht auf die "Notfall"-Schriftgröße von 12 zurückgegriffen (da der javascript-Code das style-Attribut aus der css-Datei nicht sieht), sondern es wird die tatsächliche Schriftgröße verwendet und 2px abgezogen bzw. hinzugefügt.

plain:

javascript:
var p=document.getElementsByTagName('*');
for(i=0;i<p.length;i++){
    if(window.getComputedStyle(p[i],null).getPropertyValue('font-size')){
        var s=parseInt(window.getComputedStyle(p[i],null).getPropertyValue('font-size'));
    }else{
        var s=12;
    }
    s-=2;
    p[i].style.fontSize=s+"px"
}

entspricht in hässlich (decrease):

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(window.getComputedStyle(p%5Bi%5D,null).getPropertyValue(%27font-size%27));%7Delse%7Bvar%20s=12;%7Ds-=2;p%5Bi%5D.style.fontSize=s+%22px%22%7D

und für increase:

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(window.getComputedStyle(p%5Bi%5D,null).getPropertyValue(%27font-size%27));%7Delse%7Bvar%20s=12;%7Ds+=2;p%5Bi%5D.style.fontSize=s+%22px%22%7D

Was hier sein kann, dass irgendwo ein Fehler beim Umwandeln von schön in hässlich passiert ist und Safari das nicht frisst. Kann ich aber mangels Safari nicht ausprobieren, das müsstest du dann mal testen.

 

[longterm]

Hallo, wow, vielen Dank!

Es hat funktioniert! Allerdings musste ich es noch etwas nachtweaken: Hier eine Version, die auf meinem iPhone 8 (entsprechend auch 7, 6) zumindest anhand der Testseite "http://www.andadapt.com/howto-change-the-font-size-in-safari-on-the-ipad-and-iphone/" zu einem guten Ergebnis geführt hat (s=16).

javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(window.getComputedStyle(p%5Bi%5D,null).getPropertyValue(%27font-size%27));%7Delse%7Bvar%20s=16;%7Ds-=2;p%5Bi%5D.style.fontSize=s+%22px%22%7D

Ergänzung (15. Oktober 2018)

Also ich habe es jetzt auf 10 zufälligen Seiten getestet und in 60% der Fällen war mir die Schrift eindeutig zu groß und bei 80% von diesen 60% funktionierte es und das Ergebnis war ideal.

Allerdings ergab sich immer das Problem, dass viel Raum durch Zwischenzeilenabstand verloren ging. Gäbe es dafür auch noch eine Lösung? Aber so wie es ist, ist es bereits sehr gut. Nochmals Danke!

--
(Ich "tagge" das mal noch mit iPhone reduce decrease font size javascript bookmarklet readability Schriftgröße verringern verkleinern)

Ergänzung (15. Oktober 2018)

Ich habe wie gesagt keine Ahnung von Javascript, quote hier aber mal noch Kommentarspalten aus anderen Websites, vielleicht sind da noch interessante Ideen dabei (Credits sind darunter):

javascript:var p=document.getElementsByTagName(‘*’);for(i=0;i<p.length;i++){if(p.style.fontSize){var s=parseInt(p.style.fontSize.replace(“px”,””));}else{var s=12;}s-=2;p.style.fontSize=s+”px”}

javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p.style.fontSize){var s=parseInt(p.style.fontSize.replace("px",""));p.style.fontFamily="Helvetica";}else{var s=12;}s+=2;p.style.fontSize=s+"px";p.style.fontFamily="Helvetica"}

at least 20:
javascript:var minSize=20;var p=document.getElementsByTagName(‘*’);var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p);if(st){s=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s!=undefined)p.style.fontSize=Math.max(minSize,s)+"px"}

smaller:
javascript:var p=document.getElementsByTagName('*');var s=new Array(p.length);for(i=0;i<p.length;i++){st=document.defaultView.getComputedStyle(p);if(st){s=parseFloat(st.fontSize.replace("px",""))}}for(i=0;i<p.length;i++){if(s!=undefined)p.style.fontSize=s/1.1+"px"}

credits: mfripp @ http://osxdaily.com/2012/05/11/change-font-size-safari-ios-bookmarklets/

javascript:var%20p=document.getElementsByTagName(‘*’);for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(p%5Bi%5D.style.fontSize.replace(%22px%22,%22%22));%7Delse%7Bvar%20s=20;%7Ds+=4;p%5Bi%5D.style.fontSize=s+%22px%22%7D

credits: F. Roberts @ http://osxdaily.com/2012/05/11/change-font-size-safari-ios-bookmarklets/

Zum Hauptproblem mit line height / Zeilenabstand ist da aber glaub ich nix bei.

 

[CitroenDsVier]

Das line height Problem verstehe ich noch nicht ganz.

Würde es dir helfen, die line Height grundsätzlich auf einen niedrigen Wert festzusetzen?

 

[longterm]

Hallo Citroën Déesse,

ja, das würde sehr helfen! Dann könnte ich das in Kombination mit der Schriftgrößenänderung, die bereits sehr gut funktioniert und bei mir täglich im Einsatz ist (DANKE!!), testen. Ich könnte verschiedene Höhen in der Kombi ausprobieren, und letztlich eine Kombi nehmen, die am wenigsten Probleme bereitet. Ich hoffe, ein zu geringer Abstand führt nicht zu einer Überlagerung von Zeilen.

Erneut danke, dass du dich des Themas annimmst, ich finde es ist ein sehr wichtiges und erhöht der Nutzwert des iPhone erheblich! Es ist ein Graus auf vielen Websites, wenn die Schrift so groß ist!

 

[CitroenDsVier]

Da line-height nur Werte >= 0 akzeptiert, wird ein Überlappen (zumindest durch line-height) nicht passieren.

Du könntest entweder zwei weitere Skripe (und damit Buttons/Lesezeichen) für eine größere / kleinere line-height nehmen, oder in den beiden vorhandenen Skripten die line-height auf einen festen, kleinen Wert setzen.
Das hier wäre die zweite Lösung (einzige Änderung zu oben: Zeile 11 hinzugefügt):

javascript:
var p=document.getElementsByTagName('*');
for(i=0;i<p.length;i++){
    if(window.getComputedStyle(p[i],null).getPropertyValue('font-size')){
        var s=parseInt(window.getComputedStyle(p[i],null).getPropertyValue('font-size'));
    }else{
        var s=12;
    }
    s-=2;
    p[i].style.fontSize=s+"px";
    p[i].style.lineHeight="2px";
}

entspricht (increase):
javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(window.getComputedStyle(p%5Bi%5D,null).getPropertyValue(%27font-size%27));%7Delse%7Bvar%20s=12;%7Ds+=2;p%5Bi%5D.style.fontSize=s+%22px%22;p%5Bi%5D.style.lineHeight=%222px%22;%7D

und decrease:
javascript:var%20p=document.getElementsByTagName('*');for(i=0;i%3Cp.length;i++)%7Bif(p%5Bi%5D.style.fontSize)%7Bvar%20s=parseInt(window.getComputedStyle(p%5Bi%5D,null).getPropertyValue(%27font-size%27));%7Delse%7Bvar%20s=12;%7Ds-=2;p%5Bi%5D.style.fontSize=s+%22px%22;p%5Bi%5D.style.lineHeight=%222px%22;%7D