de en es fr
Let the machine help
Light teasing, exhibition, BDSM, sissyfication, watersports... with sounds and pictures


Post new topic Reply to topic  [ 11 posts ] 
Author Message
 Need help with tiny table text
PostPosted: Wed Jun 03, 2020 12:37 pm 
Offline
Regular
I'm writing a script called "Schedule Me" that has been inspired by the likes of "Sub Challenges" and "Domme*". As part of the script, I generate an HTML table to show the current schedule from a list of loaded tasks.

The problem is that the table is absolutely tiny (see attachment). It gets even smaller if I set an image to the left.

I suspect this is because I'm brute-force-feeding a large quantity of HTML with inline CSS styling to try and get the appearance that I want, and SexScripts interprets that as being a lot of text and scales it down to make sure it fits.

I worry that I'm trying to force SexScripts to do things that it wasn't really intended for, and perhaps this is just too much. I'm neither an HTML or CSS expert, so any suggestions in that area are welcome; at least the online w3c validator says it's 'valid', but that doesn't mean it's 'good'.

Can anyone suggest a way that I can achieve the desired result (i.e. the table shown at a respectable size), or perhaps confirm that this isn't really something that'll be achievable?

This is a sample script that demonstrates the problem:
Show spoiler


Attachments:
File comment: Screenshot
tiny-text-table.jpg
tiny-text-table.jpg [ 127.63 KiB | Viewed 428 times ]
Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Wed Jun 03, 2020 4:32 pm 
Offline
Regular
Something about the like length does seem to be having an effect. Anyone know if it is possible in SS to use CSS that is not inline?

For each row added, the table get smaller (but there does seem to be a limit)

Here is a shorter version that demonstrates what is happening. If you change the td_style variable to one of the other options (1 to 4), the amount size decreases per additional table changes, but never seems to go away completely.

Code:
setInfos(9, "tiny-text-table", "test", "RustyHammer", "v0.0", 0xFFFFFF, "en", [])
setImage(null)

def head = "<tr>" +
"<td style=\"padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\"></td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Mon</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Tue</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Wed</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Thu</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Fri</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Sat</b></span>" +
"</td>" +
"<td style=\"background-color: #a0a0a0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Sun</b></span>" +
"</td>" +
"</tr>"

def td_style1 = "style=\"text-align: center; border-left: 1px solid #8080F0; border-top: 1px solid #8080F0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\""
def td_style2 = "style=\"padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\""
def td_style3 = "style=\"text-align: center; border-left: 1px solid #8080F0; border-top: 1px solid #8080F0;\""
def td_style4 = ""

def td_style = td_style1

def row = "<tr>" +
"<td style=\"background-color: #a0a0a0; border-top: 1px solid #8080F0; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;\">" +
"<span style=\"color: black;\"><b>Check the mail.</b></span>" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"<td " + td_style + ">" +
"x" +
"</td>" +
"</tr>\n"

def table = "<table style=\"padding: 0px; border-collapse: collapse;\">"
def end_table = "</table>"

for (def i=1; i <= 20; i++) {
    def rows = row * i
    show(
   table +
   head +
   rows +
   end_table)
    showButton("Okay " + i)
}


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Wed Jun 03, 2020 5:14 pm 
Offline
Regular
Thanks ralph333, your test script nicely illustrates the problem, especially seeing the contrast between using td_style1 and td_style4, since the amount of rendered text is the same for both, just with different amounts of formatting. If SS is going to scale text, perhaps it should calculate the text size based on the inner HTML data and exclude the tags. I might have to opt for a more basic table if there aren't any other options.

I also noticed in various experiments that SS doesn't support some CSS styling such "border-collapse" and "border-radius". Perhaps this is a limitation in the library being used for the rendering.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Wed Jun 10, 2020 1:27 pm 
Offline
Site Admin
User avatar
Yes it is ; I can't give any advice here, possibly the rendering will even change between platforms.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Thu Jun 11, 2020 5:38 pm 
Offline
Regular
Thanks doti, certainly this is something for me to be aware of.

Do you know which libraries/features are being used on each platform for rendering? I might be able to determine the lowest common denominator of HTML support for each so that I can constrain my overly enthusiastic styling and help ensure compatibility.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Sun Jun 28, 2020 8:04 pm 
Offline
Site Admin
User avatar
On desktop edition, it is a renderer included in Swing JLabel.
On android edition, it this is the TextView HTML renderer.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Mon Jun 29, 2020 3:53 pm 
Offline
Regular
Thanks doti.

It looks like Android provides a subset of HTML support, so I think I'll use that as the lowest common denominator as it is quite limited. Looking at the code here, https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/Html.java#781, I can discern the following tags and attributes are supported:

Code:
<br> - new line
<p> - paragraph
   style
      text-align: start|center|end;
      color: {color};
      background: {color};
      text-decoration: line-through;
<ul> - bulleted list
   style
      text-align: start|center|end;
<li> - list item within <ul>
   style
      text-align: start|center|end;
      color: {color};
      background: {color};
      text-decoration: line-through;
<div> - divider
   style
      text-align: start|center|end;
<span> - inline text block
   style
      color: {color};
      background: {color};
      text-decoration: line-through;
<strong> - bold
<b> - bold
<em> - italic
<cite> - italic
<dfn> - italic
<i> - italic
<big> - big font
<small> - small font
<font> - change font or font color
   color
      {color}
   face
      {font name}
<blockquote> - quoted block of text
   style
      text-align: start|center|end;
<tt> - monospace font
<a> - hyperlink
   href
      {href}
<u> - underline
<del> - strikethrough
<s> - strikethrough
<strike> - strikethrough
<sup> - superscript
<sub> - subscript
<img> - image
   src
      {image resource reference}
<h{1..6}> - heading
   style
      text-align: start|center|end;


Hopefully that's of some use to others too.
Disclaimer: I don't have access to an Android platform so I can't prove that these tags and attributes are supported, or that these are the only ones supported. Perhaps someone else with more resources than me can try this out.

I'm having difficulty finding documentation for the HTML subset supported by Swing's JLabel, but I'll persist to see if I can find an overlap with the Android support.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Mon Jun 29, 2020 8:11 pm 
Offline
Regular
I wrote a test script to test every HTML feature (with the exception of <a> and <img>) that's (allegedly) supported on Android; I'm still unable to find a formal reference for the supported HTML tags and attributes that are supported with Swing's JLabel for the desktop SexScripts.
Show spoiler


This script shows that the following are not supported in the desktop application:
  • <del>
  • <p style="text-align: end;">
  • <div style="text-align: end;">
  • <li style="text-align: end;">
  • <ul style="text-align: end;">
  • <blockquote style="text-align: end;">
  • <h{1..6} style="text-align: end;">

The following tags are supported but are redundant as they do the same as others:
  • <strong>
  • <em>
  • <cite>
  • <dfn>
  • <strike>

The following tags are platform specific and have external references, so I consider those excluded:
  • <a>
  • <img>

If there's someone that can run that script on Android to verify the formatting, please have a go.


Last edited by RustyHammer on Mon Jun 29, 2020 8:29 pm, edited 1 time in total.

Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Mon Jun 29, 2020 8:27 pm 
Offline
Regular
In conclusion, I believe this is the definitive subset of HTML that can be passed to show(...) on both the Desktop and Android applications:

Code:
<br> - new line
<p> - paragraph
   style
      text-align: start|center;
      color: {color};
      background: {color};
      text-decoration: line-through;
<ul> - bulleted list
   style
      text-align: start|center;
<li> - list item within <ul>
   style
      text-align: start|center;
      color: {color};
      background: {color};
      text-decoration: line-through;
<div> - divider
   style
      text-align: start|center;
<span> - inline text block
   style
      color: {color};
      background: {color};
      text-decoration: line-through;
<b> - bold
<i> - italic
<big> - big font
<small> - small font
<font> - change font or font color
   color
      {color}
   face
      {font name}
<blockquote> - quoted block of text
   style
      text-align: start|center;
<tt> - monospace font
<u> - underline
<s> - strikethrough
<sup> - superscript
<sub> - subscript
<h{1..6}> - heading
   style
      text-align: start|center;
Please let me know if anything looks incorrect.


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Tue Jun 30, 2020 8:06 pm 
Offline
Regular
Ooh, the plot thickens.

I installed Android Studio and created emulators for API 22 (the most commonly available API) and API 26 (as targetted by the SS Android package). Installing and running SS on both platforms provides some different behaviour when running the html-format-test script:

For example, see the differences between "Strikethrough" for API 22 on the left and API 26 on the right:

Attachment:
html-format-test-API22-API26.jpg
html-format-test-API22-API26.jpg [ 115.43 KiB | Viewed 179 times ]


The SS Android package specifies a minimum of API 16, so I might expect the situation to get even worse as we go back in time. I haven't performed any testing against API 16 though.

For those wondering:
  • API 16 corresponds to Android OS 4.1 Jelly Bean from July 9, 2012
  • API 22 corresponds to Android OS 5.1 Lollipop from November 12, 2014
  • API 26 corresponds to Android OS 8.0 Oreo from August 21, 2017

API 22

What doesn't work:
  • <del>
  • <s>
  • <strike>
  • <h{1-6} style="text-align: center;">
  • <h{1-6} style="text-align: end;">
  • <span style="color: {color}">
  • <span style="background: {color}">
  • <span style="text-decoration: line-through;">
  • <p style="color: {color}">
  • <p style="background: {color}">
  • <p style="text-decoration: line-through;">
  • <p style="text-align: center;">
  • <p style="text-align: end;">
  • <font face="{font name}">
  • <div style="text-align: center;">
  • <div style="text-align: end;">
  • <ul>
  • <li>
  • <blockquote style="text-align: center;">
  • <blockquote style="text-align: end;">

API 26

What doesn't work:
  • <font face="{font name}">

Does anyone think it's worth me looking back at API 16 (i.e. Android OS 4.1 Jelly Bean) to see what it's capable of?


Top
 Profile Send private message 
 
 Re: Need help with tiny table text
PostPosted: Wed Jul 08, 2020 11:50 am 
Offline
Site Admin
User avatar
Android SexScripts minimum API may be increased soon, it would be legitimate.


Top
 Profile Send private message 
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Maroon Fusion theme created by Oxydo
Software, theme modifications, phpBB modification by Doti 2010, 2015
This website uses session cookies only.