Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add OpenDyslexic font as alternative user setting #1606

Closed
ewpatton opened this issue Mar 13, 2019 · 7 comments · Fixed by #1826

Comments

@ewpatton
Copy link
Member

commented Mar 13, 2019

From the forum: Adding the ability to use a font such as OpenDyslexic to improve the readability of the web interface would benefit app inventors. I don't think we want to make it the default, but having an option to switch it on (and store the state in UserSettings) would make the platform more accessible.

@ewpatton

This comment has been minimized.

Copy link
Member Author

commented Mar 13, 2019

This would also benefit from #1593, since it moves the loading of UserSettings earlier in the app initialization, which means we can also apply a stylesheet with the font at that time.

@27vinayvyas

This comment has been minimized.

Copy link

commented Mar 18, 2019

I wanted to give it a try, know how to do in android studio.
Can u please show me where to make the required changes.
I m new in here.

@27vinayvyas

This comment has been minimized.

Copy link

commented Mar 18, 2019

@ewpatton If i m not wrong,there must be a folder for fonts , and there the Open Dyslexic font is to be added but i cannot figure out where is that fonts folder

@ewpatton

This comment has been minimized.

Copy link
Member Author

commented Mar 19, 2019

@27vinayvyas Fonts are located in appengine/war/fonts/.

The real challenge here is the design for how this is presented to the app developer. We've tried to keep discovery somewhat easy by putting most things in the designer view. But one might want to turn this feature on before they start a project, or even before they've created an account (in the case of code.appinventor.mit.edu). A simple first pass might be to add an entry to the Help menu that can be enabled/disabled in the current session but doesn't persist. A second pass could add persistence.

To add menu items, please see TopToolbar.java in the appengine module.

@27vinayvyas

This comment has been minimized.

Copy link

commented Mar 20, 2019

I m having problem understanding how to do this

  1. This is a sample code snippet for a drop down list from TopToolbar.java

fileItems.add(new DropDownItem(WIDGET_NAME_EXPORTPROJECT, MESSAGES.exportProjectMenuItem(),new ExportProjectAction()));

  1. This is the constructor function for DropDownItem() from DropDownButton.java

public DropDownItem(String widgetName, String caption, Command command) {
this.widgetName = widgetName;
this.caption = caption;
this.command = command;
}

  1. This is the MESSAGES variable

public static final OdeMessages MESSAGES = GWT.create(OdeMessages.class);

where to find stuff about OdeMessages.

Q1
The second argument is just a caption string. what things it does and what is its value in this case.

Q2
the third argument is a class in which we override a method of what is to be done. For this, can u please direct me to the part of code where all the fonts already present are accessed.

@27vinayvyas

This comment has been minimized.

Copy link

commented Mar 28, 2019

@ewpatton
Sorry for the delay but its finally working(changing font to opendyslexic on a button click)
What i have done is that i have REMOVED all the font-family attributes from Ya.css and gwt.css EXCEPT from the body tag which has Roboto as default.
On clicking the Dyslexic font button, the Roboto font attribute is removed and the opendysleic font is added to the body tag.
All the other elements ,being body's child , gets the new font.

I am facing an issue, the font inside the main design screen doesnot seems to be controlled by Ya.css and gwt.css files. It sfont is unaffected when the above changes are made.

Which css files control their font??

I just wanted to clarify if what i am doing is right or not.
If so, i can send the pr

@bartmathijssen

This comment has been minimized.

Copy link
Member

commented Aug 20, 2019

As there was little activity in pull request #1639 I started working on my own version. I used #1639 as a starting point. I now made it that the user's preferred font gets saved to the UserSettings object. I did run into an issue. When changing the font, the blocks' font gets changed, but the padding doesn't. It does render the blocks properly when reloading the page.

Before reload After reload
Selection_002 Selection_001

I can solve this by reloading the window when a new font is selected. This is also done when selecting a new language, but this doesn't feel like it is the right way to do it.

I was also thinking about the user interface of the font switcher. Pull request #1639 made it that there were always two options in the Settings dropdown. I want to make it that when the regular font is selected the DropDownItem has a caption of Enable OpenDyslexic and when OpenDyslexic is selected the DropDownItem has a caption of Disable OpenDyslexic. What do you think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.