Modifying the KaiOS 1.0 Settings App For Smaller Font Sizes

Set the Tings!


My main complaint with KaiOS has been that for how much they claim it's optimized for small screens, the font sizes are huge and there is so much whitespace around everything, they don't actually manage to fit that much information on the screen. I don't know if this is limited to the devices sold in the US or not - ours tend to be marketed specifically to old people who don't want a smartphone, and can't see that well anyway. There's a limit to the usability of big font sizes, and I think KaiOS is over said limit. Let's modify the Settings app to be more usable.


Due to the nature of the Settings app, you're not going to be in it all the time, so this is less important to usability compared to other apps. However, this is so simple, you would have to be a fool not to do this.


Much more reasonable.


There is a global font size setting in KaiOS, but it only toggles between big and enormous. Unfortunately, I haven't found a nice easy way to globally reduce the size of text, and it seems that the CSS isn't designed well enough to really handle arbitrary changes in text sizes anyway - stuff moves around and needs adjusting. So as far as I know, it really needs to be done on a per-app basis. This means you don't have to modify the system app anyway, so it's not really dangerous.



One caveat, I don't know that much CSS, so I really just play around with it until it does what I want. There are probably more elegant and robust ways to do what I do here, but this is how I did it anyway. It’s not perfect but I think it’s pretty functional.


Getting the Settings app from the phone

We do need ADB root access, so install the adbroot app or your rooting method of choice. Then get the Settings app and webapps.json from the phone with ADB root like so:


adb pull /system/b2g/webapps/settings.gaiamobile.org

adb pull /data/local/webapps/webapps.json


Create a working directory and extract the application source there:


mkdir settings-source

unzip settings.gaiamobile.org/application.zip -d settings-source


Now we can do the modifications!


Digging into CSS

Compared to many modifications in other apps in order to make a smaller font size work, the Settings app seems to be much better written. We only need to make ONE CHANGE and everything seems to work! Whoever wrote this app definitely needs a raise... We only need to modify this file:


This is simple, find the code block below and change font-size from 10px to 7.5px. Done!


 html, body {

    padding: 0;

    width: 100%;

    height: 100%;

    font-size: 7.5px;

    overflow: hidden;

 }


That's it! Really!


Now let's put it back on the phone and make sure it works.

Putting the app back on the phone

Because of the app permissions involved, this cannot be sideloaded with WebIDE. That's OK, it's just as easy to put it on using ADB. First, get root access, then the following:


cd settings-source

rm ../settings.gaiamobile.org/application.zip

zip -r ../settings.gaiamobile.org/application.zip ./*

cd ..

adb push settings.gaiamobile.org /data/local/webapps


And now we will change the path to the app in the webapps.json file we pulled earlier. Find the settings.gaiamobile.org section in the file:


 "settings.gaiamobile.org": {

    "origin": "app://settings.gaiamobile.org",

    "installOrigin": "app://settings.gaiamobile.org",

    "receipt": null,

    "installTime": 1547465160507,

    "updateTime": 1547465160507,

    "manifestURL": "app://settings.gaiamobile.org/manifest.webapp",

    "localId": 1026,

    "appStatus": 3,

    "manifestHash": "1e7e9b359b4871956d9d8095bf94885c",

    "basePath": "/system/b2g/webapps",

    "id": "settings.gaiamobile.org",

    "removable": false,

    "kind": "packaged",

    "enabled": true,

    "name": "Settings",

    "csp": "",

    "role": "",

    "widgetPages": [],

    "redirects": null,

    "additionalLanguages": {},

    "installerAppId": 0,

    "installerIsBrowser": false,

    "installState": "installed",

    "storeId": "",

    "storeVersion": 0,

    "downloading": false,

    "readyToApplyDownload": false

 },


Yours will probably be slightly different, but all we need to do is change the basePath line from “/system/b2g/webapps" to “/data/local/webapps”.


Finally, push the webapps.json file back to the phone and reboot:


adb push webapps.json /data/local/webapps/

adb reboot


Testing


It should be pretty obvious if it worked, I would think! You should be able to see MUCH more text onscreen!