adapting display of a long string on all screens

[Paul Ngom]

First of all, sorry for the scriptlets.
I want to display the content of divStr which will vary in length
depending on user input. I want the sample content
to fit in all screens(mobile phone,tablet,pc). It displays well on pc but
it becomes unreadable on mobile phone. The fonts get too small.
How should i modify the code for the display to come clean on all screens?

<table>
<%
String divStr="gfuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
uuuuuuuuuuuuuuuuuuuuuhhggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg";
int lendivStr=divStr.length();
//detMob is true if page called from mobile and false otherwise
if(detMob==true && lendivStr>=100)
 width=Integer.toString(((int)(10000/lendivStr)))+"%";
if(detMob==true && lendivStr<100)
 width="100%";
if(detMob==false && lendivStr>=50)
 width=Integer.toString(((int)(5000/lendivStr)))+"%";
if(detMob==false && lendivStr<50)
 width="100%";

 
%>
<style type="text/css">
.samplediv{
  width:<%= width%>;
  word-wrap:break-word;
}
</style>
<tr><td><div class="samplediv"><%=divStr%></div>
</td></tr>
</table>

[Bear Bibeault]

Nothing to do with JSP, moved to a more appropriate forum.

[Bear Bibeault]

For a mobile display I'd start by containing the viewport with the following:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Then take things from there.

[Paul Ngom]

Hi Bear,
Thanks a lot for moving my question to the right forum. I also do appreciate your reply. I added the meta tag but i see no improvement.

[Bear Bibeault]

What that does is to make sure that the viewport is of a consistent size. That way changes you make are not being made in a moving target. It's hard to make progress in quicksand.

From there, you need to figure out how to break up strings, or apply styles appropriate to how you want to responsively display the data on smaller screens. Do you want it to clip? To wrap? To display in a different font size? Something completely different?

These are design decisions that need to be made long before approaching the code.

If you've got 5 kilos of marbles to fit into a one kilo bag, you need to figure out how to rearrange the marbles and what compromises need to be made, because the 5 kilos are just not going to fit into the bag.

[Paul Ngom]

you need to figure out how to break up strings, or apply styles appropriate to how you want to responsively display the data on smaller screens.

I have already thought about that and that is what i do with the scriptlet and the css.

[Bear Bibeault]

Well, first of all, whatever you do in the JSP should not be with a script let -- you've no doubt heard my news on that. 15-year-old technology should be left in the past.

So what do you want to do? What is your plan to fit the 5 kilos of marbles in the 1-kilo bag?

[Paul Ngom]

So what do you want to do? What is your plan to fit the 5 kilos of marbles in the 1-kilo bag?

I cannot imagine how 5kgs of marbles will fit in a 1kg of marble bag! :-)
But to answer your first question, i want to break the string if the screen is big(tablet,pc) and the string length reaches a certain value(please see scriptlet).
I want to do the same if the device calling the page is a mobile phone.

[Bear Bibeault]

Sorry, no scriptlets.

You want to break the string to adjust to screen width, correct? If that's the case, why does mobile versus not make one bit of difference? Should you not just be focusing on the available width rather than the device type?

What are your plans to determine screen width? What's the algorithm you plan to use to determine where to insert breaks? How will you insert these breaks? Will simply inserting breaks meet design goals? (This latter is important -- rarely have I see a well-designed app that just breaks things up on smaller screens versus taking a different approach to show the data in a different way, more suited to a small display.)

What are these long unbroken strings in the first place? Hash codes? People with unpronounceable names? The sound a wooden block makes when rolling down the stairs?

[Paul Ngom]

You want to break the string to adjust to screen width, correct?

Yes, exactly what i want to achieve.

If that's the case, why does mobile versus not make one bit of difference?

I don't really understand what you mean.

Should you not just be focusing on the available width rather than the device type?

If i don't include the device type, i might not be able to control the display of the string. It may be a long line on some devices.

What are your plans to determine screen width? What's the algorithm you plan to use to determine where to insert breaks?

I can detect that the page call is coming from a mobile phone. So when this is the case, i calculate the width to feed to the div that will contain the string. This width paired with some css properties will cause the string to break automatically.

What are these long unbroken strings in the first place?

They are reply messages.

[Bear Bibeault]

Paul Ngom wrote:

If that's the case, why does mobile versus not make one bit of difference?

I don't really understand what you mean.

My point is: is it significant that you know the drive type, or that you know the window width? Why is the device type significant? If you have a small screen, you have a small screen. Does testing for the device type make sense? Or should things rather be triggering off the width?

It's kind of like the different between browser detection and capability detection.

I can detect that the page call is coming from a mobile phone. So when this is the case, i calculate the width to feed to the div that will contain the string

I would say that this is the incorrect approach. You are guessing the width based upon the device type (which may or may not be spoofed). Why not just adjust based upon the actual width of the screen, rather than guess?

CSS media queries are your best friend here.

What are these long unbroken strings in the first place?

They are reply messages.

Do these message not have spaces upon which the string will naturally break without all the brouhaha you are planning on going through?

[Paul Ngom]

Why not just adjust based upon the actual width of the screen, rather than guess?

CSS media queries are your best friend here.

Never heard of css media queries. I will find out and see if they can help.

Do these message not have spaces upon which the string will naturally break without all the brouhaha you are planning on going through?

They do but i am talking about line breaks.

[Bear Bibeault]

Paul Ngom wrote:Never heard of css media queries. I will find out and see if they can help.

If you are going to be creating responsive web pages and mobile views, CSS media queries are something you need to understand. And understand well. Drop everything, and I mean everything, before proceeding to anything else. You must understand media queries. Most of what you need to do to adjust responsively to screen sizes is done on the client and with CSS. Trying to do things with scriptlets in JSP is the most wrong direction you might take.

Do these message not have spaces upon which the string will naturally break without all the brouhaha you are planning on going through?

They do but i am talking about line breaks.

Still not seeing the problem.

[Paul Ngom]

Ok Bear, will revert.