Customizing Font-Size Toolbar Command

  • Resolved Curtiss Grymala

    (@cgrymala)


    10 years, 10 months ago

    I am working on implementing the accessibility toolbar on a new site I’m developing. At first, it wasn’t really re-sizing any of my text, and I figured, for the most part, that was because the original theme included px font-sizes throughout the style sheet.

    I added rem font-sizes to all of the definitions (keeping the px for backward-compability in older browsers), and that fixed a lot of situations for me. However, I’ve noticed that some elements are staying the same size when I increase the text size with the toolbar, and some are actually getting smaller when I increase the text size (and a few are getting ridiculously large – going from 11-12px to 36px).

    1) Any idea why my tags are all resizing very differently?
    2) Is there any way for me to customize the way the toolbar increases font-size? Ideally, I would like to be able to set the fontsize class on the HTML element in my pages rather than the body element, then use CSS to bump the font-size on the HTML element up to something like 24 or 32px (since all of my font-sizes are set in rems, that should bump everything up proportionally).

    Thanks.

    https://ww.wp.xz.cn/plugins/wp-accessibility/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    10 years, 10 months ago

    In the sidebar of the settings page for WP Accessibility, there’s a note that says that it’s almost impossible to guarantee a good result for large text using a default set of styles. As you concluded, this is because of units – different units resize differently, but I can’t pattern the CSS according to the units of your site. The resizing in WP Accessibility is done using percentage, but the end result is actually variable depending on the units used to set the size. There is no unit that universally modifies the current font size of any element due to inheritance.

    If I handled the resizing purely through JS, I could navigate over all of the elements on the page, checking their current size, and modify them all according to what was appropriate; but that could be a pretty expensive operation, so it’s not something I’ve pursued.

    You can define your own custom styles that will be rendered when the large text control is activated by placing them in your theme styles under the class ‘.fontsize’, which is added to the body element when the option is toggled on.

    Thread Starter Curtiss Grymala

    (@cgrymala)

    10 years, 10 months ago

    Understood, thanks. I’ll work on trying to resize things according to the .fontsize class.

    Is there any sort of option/filter to use entirely custom CSS for that, turning off the plugin’s style sheet (just curious, since it, rightfully so, uses the !important declaration on the font-size: 150% call)?

    Plugin Author Joe Dolson

    (@joedolson)

    10 years, 10 months ago

    Not at the moment, I’m afraid. Eventually, yes. There’s always work to be done!

    Thread Starter Curtiss Grymala

    (@cgrymala)

    10 years, 10 months ago

    Completely understood. Thanks for the info.

    Plugin Author Joe Dolson

    (@joedolson)

    10 years, 10 months ago

    This filter is being committed in version 1.4.3 right now. For usage, see https://github.com/joedolson/plugin-extensions/blob/master/wp-accessibility/custom-fontsize-css.php

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Customizing Font-Size Toolbar Command’ is closed to new replies.