Menu ▾ ▴

#19 VisualContext.font.size does not return the CSS font-size

Any_version_(please_provide_version_in_description)
pending
nobody
None
9
2014-08-20
2013-05-14
Christian Wulf
No

VisualContext.font.size always returns 16, even if I specify

body {
  font-size: 12pt;
}

Discussion

  • Christian Wulf

    Christian Wulf - 2013-05-14

    In particular, the font-size of the parent is not used if the child does not define an font-size:

    double psize = (parent == null) ? CSSUnits.medium_font : parent.getEm();
CSSProperty.FontSize fsize = style.getProperty("font-size");
if (fsize == null)
    size = em;
else {
    ...
}
     

  • Radek Burget

    Radek Burget - 2013-05-16

    Unfortunately, this is caused by an inconsistency in Java: for font sizes (int he AWT Font class), the fixed resolution of 72 dpi is used. However, the normal display resolution that should be used for other lengths is around 96 dpi (taken from Toolkit.getDefaultToolkit().getScreenResolution(), probably depends on OS settings). As the result, the font.size contains the pixel size instead of the point size. And that's the explanation for the obtained value: 12*96/72 = 16.

     

  • Radek Burget

    Radek Burget - 2013-05-16

    Regarding the parent size: if there is no font-size definition for the element, it is automatically inherited from the parent by jStyleParser. That means we always have a font-size defintion for the element. The parent size is only used for relative font sizes (em and percentages).

     

  • Radek Burget

    Radek Burget - 2013-05-25
    • status: open --> wont-fix
     

  • Nogge

    Nogge - 2013-06-10

    I need to re-open this post because the font-size is still confusing me. Look at the screenshot I made. The propery-value window displays 16pt, although I specified 12pt in the style-tag (see window at the right-bottom).

     

    Last edit: Nogge 2013-06-10
    Thumbnail
    font-size is wrong.PNG

  • Nogge

    Nogge - 2013-06-10

    Perhaps this is the reason for a layout difference between the BoxBrowser and FF/Chrome (see screenshots below).

     

    Last edit: Nogge 2013-06-10
    Thumbnail
    boxbrowser.PNG
    Thumbnail
    firefox.PNG

  • Christian Wulf

    Christian Wulf - 2013-06-10

    If I add and use sizeInPt for the java.awt.Font

    double sizeInPt = CSSUnits.points(size);
font = new Font(family, fs, (int) Math.round(sizeInPt));

    the BoxBrowser and FF/Chrome look almost the same. The Javadoc of Font requires a size in points, so why do you pass the size in pixel?

    Moreover, it is best-practice to choose a variable name that includes its unit, as I did with sizeInPt.

     

  • Nogge

    Nogge - 2013-06-11

    Perhaps, you could convert everything to the java font size in pt, e.g., the margin and the position, and compute the layout in this way? Would it solve the inconsistency bug?

     

  • Radek Burget

    Radek Burget - 2013-06-23

    I'm sorry for the delay - quite busy these days. I have spent quite much time in tuning the font sizes to work in most web pages and the result is the current CSSBox code. I mean the display should be correct although the obtained values are different. This is because Java uses different DPI for fonts and different DPI for the rest of the graphics. I mean the simple solution would be to implement a correct getFontSize() directly in the VisualContext instead of using getFont().getSize(). Would this solve your problem?

     

  • Christian Wulf

    Christian Wulf - 2013-06-23

    I have already thought that you were busy. No problem at all.

    An API adaption would not change anything, because JStyleParser computes the positions based on the font size, right?

    The BoxBrowser would still not display the same layout as FF and Chrome do (see the comparision https://sourceforge.net/p/cssbox/bugs/19/#b13b). Or is it correct that they differ? In the BoxBrowser screenshot, the row starting with "30" does not fit in the area with the black border, although it does in FF.

     

  • Christian Wulf

    Christian Wulf - 2013-07-02

    Hey Radek,
    could you please reset the status of this thread? Or don't you work on this topic anymore?

     

  • Radek Burget

    Radek Burget - 2013-07-02
    • status: wont-fix --> pending
     

  • Radek Burget

    Radek Burget - 2013-07-02

    Ok, marked as pending. I will implement the proposed solution asap.

     

  • Christian Wulf

    Christian Wulf - 2013-07-02

    Thank you very much. I count on you ;)

     

  • Radek Burget

    Radek Burget - 2013-07-02

    I have added a new getFontSize() method to VisualContext that should return the correct font size in pt. Just for avoiding further confusion.

    Regarding the presented layout comparison - is there a source code of that page available? Thanks.

     

  • Anonymous

    Anonymous - 2013-07-17 
    <!doctype html>
<html>
<head>
<title>Overlong Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="page-break.js"></script>
<style>
body {
    margin: 0;
    font-size: 12pt;    /* cssbox displays 12pt->16, 12px->12 */
    font-family: "Helvetica", sans-serif;

    line-height: 1;
}

/* 841.8898, 595.27563 */
div.page {
    position: relative;
    height: 841.8898px;
    width: 595.27563px;
    border: 1px solid black;
}

div.landscape {
    width: 841.8898px;
    height: 595.27563px;
}

div.border {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid black;
    margin: 30px;
}

.hide-for-report  {
    display: none;
}

div.page, input  {
    font-size: 100%;
    /*font-family:Arial,sans-serif;*/
}

table {
    margin: 1em;
    border-width: 1px;
    border-style: solid;
}

td {
    padding: 1px;
    border-width: 1px;
    border-style: solid;
}

.yellow {
    background-color: yellow;
}
.bold {
    font-weight: bold;
}
</style>
</head>
<body>
    <div class="page">
        <div class="border">
        <table id="vacancyShowDetailTable" class="vacancyShowDetail">
            <thead>
                <tr>
                    <th>col0</th>
                    <th colspan="2">col1</th>
                    <th class="bold">col2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="bold">huhu</td>
                    <td>hihi</td>
                    <td class="yellow">haha</td>
                    <td >hoho</td>
                </tr>
                <tr class="yellow">
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>lol</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>21</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>23</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                <tr>
                    <td>24</td>
                    <td>rofl</td>
                    <td colspan="2">bääh</td>
                </tr>
                    </tbody>
        </table>
        <p class="yellow">
            sdjfsdiofhjsldfjsdopfjspodfjsödfösjd
            <br/>
            sdiofioshofsodih
        </p>
    </div>
    </div>
</body>
</html>
     

  • Christian Wulf

    Christian Wulf - 2013-07-17

    Sorry for the very long delay. I hope you still worry about it and do not forget it. I have posted the code above. Thanks.

     

  • Radek Burget

    Radek Burget - 2013-08-02

    Ok, there seems to be a slight difference between Firefox and CSSBox when rendering this page. However, the resulting computed font sizes seem to be the same: both Firefox (using Firebug) and CSSBox indicate 12pt = 16px font. The difference may be caused by Java text drawing routines, the line height computation or anything. I am afraid, it is not possible to achive pixel-accurate results here. Is this necessary for some particular application?

    The CSS specification is not very strict regarding the resulting line height of text. It only says that the line height depends on font size but it does not say how. I have chosen some solution experimentally but other browsers may choose another way.

    As a web designer I would never rely on a fixed height of anything because different clients have different fonts, screen resolutions etc. Moreover, combining pt and px together is potentially dangerous anyway - the results depend on the acutal display DPI and you may expect problems on mobile devices etc.

     

Anonymous
Anonymous

Add attachments
Cancel