Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline-blocks + vertical-align do not render correctly #672

Open
mnpenner opened this issue Jun 25, 2013 · 4 comments · May be fixed by #2762
Open

Inline-blocks + vertical-align do not render correctly #672

mnpenner opened this issue Jun 25, 2013 · 4 comments · May be fixed by #2762
Labels
layout
Milestone
3.1.0

Comments

@mnpenner
Copy link

This code:

<style type="text/css">
code {
    background:black;
    color:white;
    display:inline-block;
    vertical-align:middle
}
</style>
<p>
    Some text <code>A<br />
    B<br />
    C<br />
    D</code> continues afterward.
</p>

Does not render correctly:

selection_022

I'm having a lot of trouble getting inline-blocks to align nicely in a paragraph of text; DOMPDF doesn't seem to respect the vertical-align property. It's particularly bad when you put a normally block-level element in a paragraph, but even when I try with a span, the alignment is off:

selection_023
@bsweeney
Copy link
Member

There are actually two issues here.

  1. Auto-width calculation is, essentially, non-existent. inline-block elements should have their width calculated based on the content, but this isn't happening. It's a problem with any element where the width should be calculated (i.e. not set at 100%). You can see this by explicitly setting a width, 1em works in your test case.
  2. vertical-align is not well handled. Actually, appears to be ignored in this case. Something we'll have to work on. You can simulate the effect if you know the height of your content. Try a negative margin in your test case.

Updated sample:

<html>
<head>
<style type="text/css">
  code {
    background:black;
    color:white;
    display:inline-block;
    width: 1em;
    margin-bottom: -1.35em;
  }
</style>
</head>
<body>
  <p>
    Some text <code>A<br />
    B<br />
    C<br />
    D</code> continues afterward.
  </p>
</body>
</html>

@mnpenner
Copy link
Author

Thanks for the response.

The margin-bottom trick seems to work when there is text in the box and no height is set. If I want an empty box, however, it doesn't seem to have an affect:

<style type="text/css">
  code {
    display: inline-block;
    width: 3mm;
    height: 3mm;
    border: 1px solid black;
    font-family: arial;
    color: black;
    margin-bottom: -10mm;
  }
</style>

<p>Some text<code></code>continues afterward.</p>

@bsweeney
Copy link
Member

I dunno why I went with a negative bottom margin. Guess I was thinking of pulling the object down. You can alternatively use a positive top margin, which is probably more consistent anyway. The real problem is that you have to hand-craft your positioning for every element using this styling since the heights will vary. The best solution would be to fix the issue.

@bsweeney
Copy link
Member

No updates, but I think auto-width issues will be addressed as part of #627.

bsweeney pushed a commit that referenced this issue Apr 4, 2016
@bsweeney
Add auto-width calculation for float and inline-block elements
542483a 
Plus:

 * Fix style specificity based on the origin of the stylesheet.
 * Add :focus psudo-class to stylesheet parser.
 * Fix 'content' css property being set to 'normal' for all :before/:after
   selectors before determining their specificity.
 * Add extra check to prevent Helpers::build_url() from throwing a warning
   for URIs of 1 character (eg: '#').

Closes #1158
Addresses #627, addresses #371
Partially addresses #631 and #26
Fixes #1074, fixes #1031
Partial fix for #672

... and many more
@bsweeney bsweeney mentioned this issue Aug 19, 2016
Closed
@bsweeney bsweeney added this to the 0.7.2 milestone Feb 3, 2017
@bsweeney bsweeney modified the milestone: 0.8.1 May 21, 2017
@resident0 resident0 mentioned this issue Jul 3, 2019
Open
@bsweeney bsweeney added layout and removed On Deck labels Jan 29, 2022
@bsweeney bsweeney added this to the 2.0.1 milestone Jan 29, 2022
@bsweeney bsweeney linked a pull request Aug 25, 2022 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@bsweeney bsweeney modified the milestones: 2.0.1, 2.0.2 Aug 25, 2022
@bsweeney bsweeney modified the milestones: 2.0.2, 2.0.3 Dec 29, 2022
@bsweeney bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
layout
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

Improve vertical alignment and related adjustments dompdf/dompdf
2 participants
@bsweeney @mnpenner