Creating an HTML Based eALSRB

Michael R

Minor Hero
Staff member
Moderator
Joined
Feb 4, 2003
Messages
4,622
Reaction score
4,162
Location
La Belle Province
First name
Michael
Country
llCanada
Is there something like a hard hyphen, so 4-6-7 will never be split into two parts?
 

ColinJ

Member
Joined
Dec 19, 2009
Messages
129
Reaction score
107
Location
Calgary
Country
llCanada
Thank you! It works.
There is also css nowrap class, which keep things together regardless of the contents. The non-breaking hyphen works well but I found the hyphen to small for my liking (or my age). Ended up using – instead, but it wrapped. Then used − which didn't wrap but is huge, larger than a —. The font I selected could also be the culprit; I wanted the I (capital i), l (lower case L), and 1 easily distinguishable.

.nowrap { white-space: nowrap; }
.underline { text-decoration: underline; }
sup { font-size: 0.8em; vertical-align: top; font-weight: normal; }

<span class="nowrap"><span class="underline">6</span><sup>2</sup>&ndash;<span class="underline">2</span>&ndash;</span> as per the Russian counter. 2 superscript, and the 6 and 2 each underlined individually. i.e., 62-2-8

Colin
 
Last edited:

Michael R

Minor Hero
Staff member
Moderator
Joined
Feb 4, 2003
Messages
4,622
Reaction score
4,162
Location
La Belle Province
First name
Michael
Country
llCanada
as per the Russian counter. 2 superscript, and the 6 and 2 each underlined individually. i.e., 62-2-8
I note that in the text of examples in the original rule book, they use 4-6-7, not 41-6-7.
 

Tuomo

Keeper of the Funk
Joined
Feb 10, 2003
Messages
4,652
Reaction score
5,537
Location
Rock Bottom
Country
llUnited States
The software engineer in me appreciates that you guys know what you're talking about.

The system engineer in me hates that you all are doing it by yourselves, not leveraging each other at all.

WORK TOGETHER.
 

Pacman Ghost

Senior Member
Joined
Feb 25, 2017
Messages
590
Reaction score
298
Location
A maze of twisty little passages, all alike
Country
llAustralia

hongkongwargamer

Forum Guru
Joined
Apr 4, 2013
Messages
7,180
Reaction score
5,569
Location
Lantern Waste
Country
llUnited Kingdom
Whilst there are indeed "sad" things in the world, this don't qualify as one such instance. An electronic rulebook is not a key to survival, it's not even key to us playing ASL, it's a nice to have.

Those of us who chose to do it, chose it out of our own volition, as a hobby.

#firstworldproblems
 
Last edited:

Tater

Elder Member
Joined
Oct 25, 2003
Messages
9,827
Reaction score
542
Location
Ardmore, TN
Country
llUnited States
Whilst there are indeed "sad" things in the world, this don't qualify as one such instance.
A matter of opinion really, as most "sad" things are. In fact, there are "sad" things for some people, while those exact same things could make others "glad". For example, Texas Tech lost the game...their fans are sad...OTOH...UV fans are "glad" Tech lost.

It is "sad" that MMP hasn't made the eASLRB investment. Besides being a major customer service win, it could be an additional revenue stream with a subscription based update and/or access model. The more revenue MMP has, the more likely they can stay in bidness and supporting ASL into the future.
 

ColinJ

Member
Joined
Dec 19, 2009
Messages
129
Reaction score
107
Location
Calgary
Country
llCanada
One other big problem I ran into in this eASLRB venture was images and texts not getting along well. Sort of like images in MS Word!! Text formats would only encompass text and if an image was involved there would be problems with the image being outside the format of the text. Tables work but generally result in a lot of white space in the document.

See8220 thumbnail on LHS. I have minimal experience with images in the forum, so we'll see what happens. A thumbnail is shown, but the full image has been attached. edit: I see when a thumbnail is inserted, the full image can be shown with a click! Know for next time.

The image pushes out of the example bubble, into the parapragh below, even though the image is between <p class="ASLExample"></p>. The image leaks out. The solution is the "clearfix hack" as I finally found out.
The css portion of this is:
.clearfix::after { content:""; clear:both; display:block; }

By pu8222tting in the <p class="clearfix ASLExample"> and having css deal with the image floats, the image stays in the bubble.
This also means on various displays, the text will wrap under the image if necessary. If the image is tall and thin, using clearfix several paragraphs down will keep the text flowing around the image and removing a lot of white-space. Generally, I do this for the Terrain portions of the rules. The image for the terrain can be shown beside multiple (sub)sections of the rules without causing any confusion.

Since clearfix keeps the images in their html container, it also removes the staircase effects when there are several images with text in succession. See the samples below.
822482258226
 

Attachments

zgrose

Elder Member
Joined
Jun 13, 2004
Messages
4,235
Reaction score
948
Location
Kingwood, TX
First name
Zoltan
Country
llUnited States
Flexbox goes a long way to reversing years of CSS hackery
 

MatrimSaric

Member
Joined
Sep 7, 2012
Messages
493
Reaction score
159
Location
Leicestershire
Country
llUnited Kingdom
the software engineer in me is now itching to make this more complex. if the rules were in json (or similar) then the client could be anything from angular 2 to a non html app. that way errata could be easily replaced with the client none the wiser. might even be amusing to use a firebase or azure back end. i sense a project coming on..
 

footsteps

Just visiting
Joined
Oct 19, 2007
Messages
7,379
Reaction score
3,532
Location
Ontario
Country
llCanada
the software engineer in me is now itching to make this more complex. if the rules were in json (or similar) then the client could be anything from angular 2 to a non html app. that way errata could be easily replaced with the client none the wiser. might even be amusing to use a firebase or azure back end. i sense a project coming on..
I see a lot of English words in that post, but I'm not sure what the greater meaning is. o_O
 
Top