Word Wrap

[stiltzkin]

Small feature request - this is pretty minor but it would make a nice quality of life improvement.

Could we get the details fields on waypoints to wrap around? It'd be nice on desktop but especially useful in mobile mode. Without it it's basically impossible to read my notes out in the field without copying and pasting the text into some other app.

Thanks!

 

[Boyd]

I'm looking at the waypoint screens now and, sorry, but I can't understand what you mean by "word wrap". What is happening now, and how would you like it to change?

Are you talking about the fact that the data fields are wider than the screen? That doesn't seem to happen on any of my test devices. What kind of phone is that?

 

[stiltzkin]

I probably should have said "text overflow" or "multi-line input" rather than word wrap, but these are all related concepts.

By default it looks like this - you use an <input> field:

This is usually fine, but for long descriptions with a lot of contextual information about a waypoint, the text is truncated and hard to get at on a mobile device. To access the rest of the text, since there is no scroll bar, you have to either select all of the text in the field and copy and paste it somewhere else (e.g a notes app), or you have to carefully select the text and horizontally scroll at the far edge of the screen to push the cursor along and see the rest. I tend to type up notes about waypoints on a desktop computer and then use the waypoints file on my phone in the field, which is when I encounter this.

One way of addressing it might be to instead use a <textarea> element, which is natively multi-line, rather than <input>. If you do that, it looks like this:

The text wraps to a new line on a word boundary (thus, "word wrap"). This is a bit easier to use, since it should provide multiple lines and scrollbars regardless of your users' platform.

<textarea> is by no means the only way to accomplish this, it was just the simplest one I could think of. And if you don't really see this as an issue, that's fine as well. As I said, it's a minor thing.

I hope that makes sense.

 

[Boyd]

OK, I see, thanks. Hmm... let me think about that however. It appears you are using the data fields in a way that I never intended. I never considered that they would hold so much text, that is what the multiple data fields are for. Silly example inspired by your first screenshot

 

[stiltzkin]

That's fair, I could split up some comments into multiple fields I suppose. It still might be nice to have just one particular field (Description seems the best candidate) to support longer entries. For example, detailed directions on the best way to approach a particular waypoint. It might be a bit more awkward to split something like that up, but not the end of the world. I could also just use a bona fide notes app for the context and just store a reference to it in the waypoint details. The only reason to not do that is that it's nice to have everything in one place.

As far as the phone, I currently use a Sony Xperia 1 MkIII which is a tall and narrow device with a 21:9 aspect ratio display. Probably a bit of a unicorn in terms of phone screens and probably not something you'd have tested for. Yes, the text box boundaries ideally shouldn't overflow the right side of the screen, but that's really nitpicking.

 

[Boyd]

I can understand where you're coming from and it's certainly nice to be flexible, but on a practical level, I just don't see me re-writing the waypoint code anytime in the foreseeable future. With so many other things to do, there just isn't much incentive for me to do that, sorry. As it stands, the assumption is that you want to display data on a spreadsheet in relatively narrow columns. Maybe there's another app that would work better for you?

That's an unusual phone, was just reading about it. I wonder, does it use non-square pixels maybe? Like I said, I can't reproduce that problem of the input fields spilling off-screen.

 

[Boyd]

I can't reproduce that problem of the input fields spilling off-screen.

Come to think of it, I did see a problem like that before when I rotated the phone from landscape to portrait view while editing a waypoint. Thought I had fixed that problem, but maybe not?

 

[stiltzkin]

I ended up just writing the code myself. I put together a userscript that replaces the input field for Description in the waypoint editor with a textarea element. So for me, the site always looks like my second screenshot now

 

[Boyd]

Since you now have the possibility to enter a lot of text, keep in mind that waypoints are stored using the localStorage API. The amount of data you can store (apparently) varies by browser, I have seen 2MB to 10MB given as a range - Mozilla says 5MB maximum. Other data is also stored this way, so you don't want to exceed the limit.

Another thing to keep in mind is that your data can be automatically deleted by the browser if you don't visit boydsmaps.com often enough. Again, this varies by browser but it is only one week with Apple Safari. If working with waypoints, you should install the web app, which (supposedly) has persistent storage that the browser will not delete. However if you use both the browser and app on the same device, I'm not sure exactly how that works...

 

[stiltzkin]

Thanks - I'm not too worried about overflowing localStorage. I'm not storing that much more text in these fields; maybe a paragraph at most. Since I frequently save all my waypoints to a text file, using your nice export feature, worst-case scenario I would just reload them from a file.