New Baka-Tsuki Android App: Development

[Nandaka]

CSS margins stuff, better use em (scaled to the font size) rather than mm (physical measurement), refer to: http://kyleschaeffer.com/user-experienc ... -vs-pt-vs/

The best way is by providing an option to supply your own css (e.g.: read from the sdcard) to handle this.

Updates:
- Merged changes from Thatdot7:
- Change margin to 5%
- Add preferences for line spacing, change default to 150% (Nandaka).
- Update MainActivity, fix color for white theme.

Change uploaded to GitHub.

[Thatdot7]

CSS margins stuff, better use em (scaled to the font size) rather than mm (physical measurement), refer to: http://kyleschaeffer.com/user-experienc ... -vs-pt-vs/

The best way is by providing an option to supply your own css (e.g.: read from the sdcard) to handle this.

Thanks for that. I didn't know there was a % for a pixel replacement.

What will be done: Unless Nandaka beats me to it, ill just use your new CSS and switch with an option, then we can have as many (maybe) stylings for the novel content as people might find required.
I think that was too obvious, i feel kinda dumb.

EDIT: you didnt only reverted the css...

I have updated the CSS to use a 5% margin instead of the crazy 10mm margin.. *whistle*.....
I have also added a preference to input the line spacing, so please don't have to read the text like a poem or a wall of black and white pixels.

Screenshots:

Spoiler! :

Other notes: On that Froyo device, I was getting a "java.lang.IllegalArgumentException: Service not registered... but it wasn't fatal. It acted more like an annoying popup

On a side note, I feel like I am dodging the system here. Is there a formal process to go through to push code or post suggestions/implements?

[Nandaka]

Updates again:
- Add Use Custom CSS and Custom CSS Path on preferences, this takes precedence from the internal css, but not with the force justify/line spacing. Need to reload the chapter activity to take effect.

On a side note, I feel like I am dodging the system here. Is there a formal process to go through to push code or post suggestions/implements?

If you already invited as developer, then you can push your changes directly to the master tree in GitHub.
If you don't have, then just fork the repo and create a pull request when you want to merge it back to the master tree.

If you have any ideas, you can put it in this forum, especially if you have the mock/screenshot of the changes, then we all can discuss it together.

EDIT: forgot to update the pop-up dialog for line-spacing preferences, the default it 150%, not 100%.

[Erakk]

Build 37: (custom css update)
https://www.dropbox.com/s/mwwv9gq107h56 ... 1-0-37.apk

[Bloodscythe]

Build 37 Report:
Well, the margins have been decreased so its an improvement, I guess, but getting over the old text format will be quite a challenge. I'm not sure if I WANT to do that.
Anyway, setting line spacing to anything below 100 will pretty much just cause the lines to overlap. Setting it to 10000000 won't have the desired effect you were looking for, not a bug, just me fooling around.
Now then, what is the custom css? I assume it has something to do with text formats. Obviously, when I enable it says there is no custom css.
Could someone please enlighten me on this?
I'm *sure* there's some people who liked to know too, maybe.
Small visual bug I just noticed:
When using the white theme the main menu items e.g Novels, Watchlist will still be white.
The white background will clash with the white text making it somewhat difficult to read.
That's it, I guess. Nothing major as I don't use the white theme but some people do. Oh and the Icons will turn black so there's nothing wrong there.

[Erakk]

Build 37 Report:
Well, the margins have been decreased so its an improvement, I guess, but getting over the old text format will be quite a challenge. I'm not sure if I WANT to do that.
Anyway, setting line spacing to anything below 100 will pretty much just cause the lines to overlap. Setting it to 10000000 won't have the desired effect you were looking for, not a bug, just me fooling around.
Now then, what is the custom css? I assume it has something to do with text formats. Obviously, when I enable it says there is no custom css.
Could someone please enlighten me on this?
I'm *sure* there's some people who liked to know too, maybe.

I'm not an expert, but from my experience, CSS is a file that contains a set of styling rules for text, its widely used in websites.
They can determine the sizes, fonts, colors, margins, backgrounds, etc, of texts anywhere in the page, if you know their tags.
This option actually gives an amazing power to the user if you know how to mess with it.
The CSS is basically the text format you commented about =D

[Nandaka]

Build 37 Report:
Well, the margins have been decreased so its an improvement, I guess, but getting over the old text format will be quite a challenge. I'm not sure if I WANT to do that.
Anyway, setting line spacing to anything below 100 will pretty much just cause the lines to overlap. Setting it to 10000000 won't have the desired effect you were looking for, not a bug, just me fooling around.
Now then, what is the custom css? I assume it has something to do with text formats. Obviously, when I enable it says there is no custom css.
Could someone please enlighten me on this?
I'm *sure* there's some people who liked to know too, maybe.

basically, use your own defined css for layouting (which you need to supply), the default path will try to read a file called custom.css in the sdcard root folder.
If it is failed to read or contains no data, it will load the default style.

Here are the default css before patch from Thatdot7:
- White Theme: https://raw.github.com/calvinaquino/LNR ... /style.css
- Dark Theme: https://raw.github.com/calvinaquino/LNR ... e_dark.css

Save it as custom.css and save it on your sdcard root folder.

By using custom css, it allow you to have your own layout for reading, for example if you want to have green text on black background.

For how to define css rule, you can ask google

EDIT: like erakk said

[Erakk]

Do as Nandaka said, and you can also open it in any text editor and mess with some values, so you can adjust to your liking.

[Bloodscythe]

Oh?
So that means we'll be able to create our own text formats and share it with other people.
And everything's fully customisable as well?
That sounds pretty good. Although, I don't really know how to create a CSS and I'm not a designer sort of person but there a lot of people that are so, yeah, themes to look foward to, I guess.
Trying to download a CSS on a phone to make things go faster. But the CSS appears as lines of coding. I guess I have to go on a computer and 'right click, save as"?

[Erakk]

Oh?
So that means we'll be able to create our own text formats and share it with other people.
And everything's fully customisable as well?
That sounds pretty good. Although, I don't really know how to create a CSS and I'm not a designer sort of person but there a lot of people that are so, yeah, themes to look foward to, I guess.
Trying to download a CSS on a phone to make things go faster. But the CSS appears as lines of coding. I guess I have to go on a computer and 'right click, save as"?

right click on Nandaka's links and save as. they must be saved as <name>.css (where name can be anything).
EDIT: on a phone ah...

Im finishing build 38 that has a preference thats lets you choose between standard style and Thatdot7 style. more can be added later.

[Bloodscythe]

I finally did it!
I learnt something today.
COPY+PASTE on a phone is so annoying it hurts!
Plus, all I needed to do was copy and paste into a txt document then change the .txt extension to .css. Phew. Easy on a computer, WAY TOO much swiping, holding, tapping and getting annoyed on a phone, hahaha.

[Thatdot7]

WARNING: Please learn CSS before you try this option out.

External CSS Layout Feature
Introduction
CSS is styling language used in HTML pages to make them look pretty. It is what make websites look completely different from each other despite using the same elements.
The reader itself actually uses HTML to display the text. Hence, the way it is styled in the app is via a CSS stylesheet.

Selecting your own CSS Stylesheet

Spoiler! :

Start off by going to the Settings page, then selecting CSS Layouts in the list.
Once there you will see a screen with 4 items. If you go ahead and check the "Use Custom CSS" item.
The key to remember here is that you will be substituting the CSS stylesheet that is built in, so if you want other options, you will have to code it into your own stylesheet.


Modifying your own stylesheet

Spoiler! :

This can be done in the computer then transferred over rather than doing it on the device in which the app is installed, but for the sake of demonstration, this will step you through how to change the stylesheet.

Transfer the following file to your device: https://raw.github.com/calvinaquino/LNR ... /style.css
Once transferred, open it up with your desired text editor app.

This is your standard CSS Stylesheet you can see in every website. Through this looks like a nightmare to go through, it is easier than it looks with a bit of CSS knowledge (I think).
Lets observe one thing we can do. Lets change all the text to blue.

Towards the bottom of the file, you will find this block of code:

Code: Select all

p {
	font-family: Tahoma, Verdana;
}

Add the line "color:blue;" inside the brackets. This is telling the reader to change anything with a paragraph element (text) to blue.

Your code will look like this:

Code: Select all

p {
	font-family: Tahoma, Verdana;
	color:blue;
}

Save and close.

Navigation back into the BakaTsuki Reader App and change the "Custom CSS Path" in the CSS Layout screen to where you put your .css file.

Results

Spoiler! :

Go back into the BakaTsuki Reader and read a novel.

It is important to note that your preferences for linespacing and justified text will not apply since you did not define it in your stylesheet.
This can be a tool that can make you customize reader to suit your tastes.


Appendicies and Notes
- Line Spacing can be included by adding in "line-height:150%;" into the section modified in the tutorial.
- Forced Justification can be included by adding in "text-align:justify !important;" into the "body" section (found at the start of the stylesheet).

- http://www.w3schools.com is a great place to start learning about CSS.

[Erakk]

This is a good content to put inside the app on the CSS part as a mini tutorial =)
very good.

[Bloodscythe]

I seem to recall a member who wanted the white theme for the Menus but the black theme when reading but wasn't able to because it hadn't been implemented.
Well, now its actually possible by using the custom CSS option!
While using the black CSS theme, I accidentally hit the "Invert colors" option. I was a bit suprised when the chapter didn't change into the white theme but the pop up dialogues and menus did.
Then, I actually remembered I was using a custom CSS theme.
And so here I am. Wasting your time.
Well, for the member and possibly others, who wanted different themes between the Menus and
the chapters, you can now do so. Have fun!

Perhaps, there will be future content where you can customise the CSS within the app easily instead of changing long lines of coding. The line spacing option might just actually be the first step, maybe. So far all I can do is change colors and make text appear way over to the right.

[Nandaka]

Hiya,

I'll try to merge the changes from Thatdot7 later on, as it cannot be merged automatically by github.

EDIT: Merged, but untested. At least it compiles (dun have my tablet @ office and the AVD is verry slow in my laptop)

EDIT2: Ran in my tablet