iOS Dynamic Type support

ionic-v1
1

I’m in the process of figuring out what native features I’d be missing out on going the hybrid route. I have friends who are ardent opposition and wish hybrid would basically gdiaf.

Dynamic Type on iOS is the one thing that can be supported in UIWebViews, I’ve just found out. Messing about in the simulator, these were the styles I disabled to get dynamic type working on some elements. I’m not sure how it’s applied, since I couldn’t get the header text to work unless I changed it to an h3.

label {
    font-size: 14px;
}
.item {
    font-size: 16px;
}
body {
    font-family: "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    font-size: 14px;
}

html {
    font-family: sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, fieldset, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font:inherit;
    font-size: 100%;
}

I used the snippet the bottom of this link: ChocolateChip-UI — Dynamic Fonts for iOS Web Apps

Another example is here, although I didn’t use it: http://codepen.io/robtarr/pen/fsvIa

Question is: can we have dynamic type support added in at some point? Would be a small win for accessibility!

2

I don’t believe this is possible with just css.
To use this, you should use this plugin


And use it like so.

.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {

    window.MobileAccessibility.usePreferredTextZoom(true);
    function getTextZoomCallback(textZoom) {
      console.log('WebView text should be scaled to the preferred value ' + textZoom + '%')
    }
    window.MobileAccessibility.getTextZoom(getTextZoomCallback);

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

Be warned, we haven’t accounted for this in our css so it could look a little wonky