• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Table text too small on Android (Resp html5)

Contributor ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

I use FM19 to publish as responsive html5. I have a table that looks fine on my desktop pc and on my laptop:
vmsdatatypesDesktop.JPG

As you can see above, the table text has the same size as the body text.

However, on my Android phone, the table text suddenly becomes very small:


vmsdatatypesAndroid.JPG

(Sorry for the scaling issue, image size should be much smaller, as my cell phone screen.)

Anyway, as you can see, the table text isn't even half the normal text size.

 

Due to this, the google indexing says "Page isn't usable on mobile", "Too small text to read" and "Viewport not set".

 

What can I do to get bigger table text?

Views

151

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

What are the FM Paragraph Formats for the various cell para types?
What say they for the font size of the deminutives?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

Text-format wise they are identical.

The FM "body" paragraph style has font Times New Roman, size 11 pt. Which is mapped as:

fm_body.JPG

The css file then contains:

p.FM_Body {
           margin-left:0.000pt;
           margin-right:0.000pt;
           text-align:left;
           text-indent:0.000pt;
           margin-top:0.000pt;
           margin-bottom:5.000pt;
           word-spacing:normal;
           font-family:'Open Sans'                                              , sans-serif;
           font-style:normal;
           font-weight:normal;
           font-size:11.0pt;
           color:#000000;
           background-color:none;
           text-decoration:none;
           letter-spacing:normal;
           line-height:22px;
}

 

 

The FM "Table body" paragraph style has font Times New Roman, size 11 pt. Which is mapped as:

fm_table_body.JPG

The css file contains:

p.FM_Table_Body {
                 margin-left:0.000pt;
                 margin-right:0.000pt;
                 text-align:left;
                 text-indent:0.000pt;
                 margin-top:0.000pt;
                 margin-bottom:4.000pt;
                 word-spacing:normal;
                 font-family:'Open Sans'                                                            , sans-serif;
                 font-style:normal;
                 font-weight:normal;
                 font-size:11.0pt;
                 color:#000000;
                 background-color:none;
                 text-decoration:none;
                 letter-spacing:normal;
                 line-height:22px;
}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2022 Sep 02, 2022

Copy link to clipboard

Copied

I have very little experience with the FM output to HTML, but a couple of things catch my eye in the mapping:

  1. font-size:…;
    That's getting set despite it being blank in the CSS rule setup; interesting. I might have expected that Attribute to be omitted, causing the font-size to just inherit.
  2.  11.0pt;
    Do you have any ability to change that to another HTML metric, such as em?
  3. font-family:'Open Sans', sans-serif;
    So the serif family used in the FM source is being deliberately changed to sans?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2022 Sep 02, 2022

Copy link to clipboard

Copied

LATEST

The p.FM_Body and p.FM_Table_Body leads me to believe you are using the default mappings to HTML, rather than explicitly mapping to defined CSS definitions. I've never been happy with output that uses the default mappings.

Among other things, default mappings write to an "on the fly" CSS, and that CSS is almost impossible to control.

Try mapping your 2 para tags to either an existing CSS entry, like BodyLevel1, or create a new CSS class altogether
(don't use Body, so as not to be confused with the BODY html element name)

If the two tags are mapped to the same CSS style, they should appear the same in your output, and if they are mapped to something in your "main" CSS, you should be able to control the size of the text.

Pro tip 1: I usually play around with the color of the text first, to be able to easily see the scope of the CSS. Once I get the correct mappings and CSS entries in place, I remove the test settings in the CSS, and adjust the size.

Pro tip 2: Use the same size units throughout your CSS. Mixing px, pt, and em can also result in unintended formatting.

 

-Matt

MattSTechCommTools_0-1662152543597.png

 

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines