Buying HTML/CSS fix. $25 payout to whoever fixes this

Discussion in 'Programming' started by stats, Jan 19, 2012.

  1. #1
    I need a fix on a bit of HTML/CSS code. First person who posts the solution (in form of complete HTML code that works) here will get the $25 reward

    Here is how:
    Please go to http://208.115.224.243/test.php and click on "Generate PDF" at the bottom, you will see how in the generated PDF file the lines wrap. I need those individual lines to NOT wrap, something similar to doing <nobr>this line should not break</nobr>

    The problem is, my pdf generator does not seem to understand the <nobr> tag neither it seems to understand the css white-space property, so i am in need of another solution.

    Please experiment with the code and try out every tricks that you know, once you achieve a working result - post your HTML code here in this thread

    First person to reply here with a working solution will get $25 to their paypal

    Good luck, and thanks
     
    stats, Jan 19, 2012 IP
  2. Scoding

    Scoding Well-Known Member

    Messages:
    1,091
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Scoding, Jan 19, 2012 IP
  3. Technoslab

    Technoslab Peon

    Messages:
    46
    Likes Received:
    3
    Best Answers:
    3
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    Works:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style media="all">
    .unchecked {
        white-space: nowrap;
    }
    .nowrap{
      white-space: nowrap;
    }
    </style>
    
    <body>
    <table width="600" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td class="nowrap">
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
        </td>
      </tr>
    </table>
    </body>
    </html>
    
    Code (markup):
    PM for my paypal.
     
    Technoslab, Jan 19, 2012 IP
  4. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    Technoslab - it doesn't work ..

    it still wraps the lines in the pdf
     
    stats, Jan 19, 2012 IP
  5. Nigel Lew

    Nigel Lew Notable Member

    Messages:
    4,642
    Likes Received:
    406
    Best Answers:
    21
    Trophy Points:
    295
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    Nigel Lew, Jan 19, 2012 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6
    No lines break, tried all possible browers.... But what do you actually want? To remove the border around the text?
     
    wiicker95, Jan 19, 2012 IP
  7. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    why would i ever care about reputation of my testing server on some "i don't care about" reputation site called mywot ? lol
    it's a vps recently leased by me .. if you have trouble with those IPs, contact the hosting company that owns the servers (named ideastak)

    ok ppl .. please .. if you are not about to fix my code, please stop hijacking this post with your irrelevant thoughts and guesses about web server reputations, estimated number of contest-lovers, number of stars on the sky or the height of an elf ..


     
    stats, Jan 19, 2012 IP
  8. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #8
    When you click the "generate PDF" button on bottom of page, it will generate a PDF file from the HTML code you enter into the box.
    If you then open the pdf file, you will see that lines wrap.. each line that says "[] this line should not break", should actually NOT wrap at all .. it should completely be on a single line. The whole text may wrap before or after that snippet, but NOT in the middle of it..

    so .. for instance .. this is a CORRECT way for it to be

    [] this line should not break [] this line should not break
    [] this line should not break [] this line should not break
    [] this line should not break [] this line should not break
    [] this line should not break [] this line should not break



    and this is a WRONG way

    [] this line should not break [] this line should
    not break [] this line should not break [] this line
    should not break [] this line should not break


    it is wrong because some lines wrap in the middle of the text snippet "[] this line should not break" (which in my code is put in <span>s)

    Hope this explains

     
    stats, Jan 19, 2012 IP
  9. Valkyrie™

    Valkyrie™ Well-Known Member

    Messages:
    164
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #9
    There's something wrong with your PDF generating backend. Try the following code I gave, paste it in notepad, save it as something.html and open it in firefox.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style media="all">
    .unchecked {
    	white-space: nowrap;
            display:block;
    }
    </style>
    
    <body>
    <table width="600" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
        </td>
      </tr>
    </table>
    </body>
    </html>
    
    Code (markup):
     
    Valkyrie™, Jan 19, 2012 IP
  10. creativeGenius

    creativeGenius Well-Known Member

    Messages:
    273
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    120
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #10
    well ive always had this problem when it comes to converting html to pdf, most of the time, the styles are ignored/discarded by the converter, in this case, a table would probably do the job instead of a span
     
    creativeGenius, Jan 19, 2012 IP
  11. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #11
    Yes the pdf generator is not a browser, and it does not render just like a browser would do .. and i told about that in my first post. My own HTML shows just fine in a browser too ..

    I need to try out all possible alternative ways and see which way would work with my pdf generator

    oh and i forgot to tell .. the pdf generator is the tcpdf



     
    stats, Jan 20, 2012 IP
  12. stephan2307

    stephan2307 Well-Known Member

    Messages:
    1,277
    Likes Received:
    33
    Best Answers:
    7
    Trophy Points:
    150
    As Seller:
    100% - 0
    As Buyer:
    100% - 2
    #12
    I have generated loads and loads of pdf documents with php and this problem is not entirely a html issue. It is a combination of the html and php. Unless you show us the php code, we can not fix your problem.
     
    stephan2307, Jan 20, 2012 IP
  13. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #13
    Oh, that explains everything :)

    I'll post up the valid code soon.
     
    wiicker95, Jan 20, 2012 IP
  14. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #14
    The php code is not of much interest unless you are willing to edit the whole tcpdf system. If you are interested in the PHP source, it's an open-source pdf generator (so far the best i found) called tcpdf (http://www.tcpdf.org/) and widely used in popular systems such as joomla. If you have the guts to edit the tcpdf to make it understand the CSS white-space property, be my guest .. i'll pay you double of what promised if you can make tcpdf to recognize that

     
    stats, Jan 20, 2012 IP
  15. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #15
    The problem is, in my real code the text is dynamically generated by php (based on user input) and i don't know the length of each snippet. If i create a table, that will mean assigning equal space for each snippet and that space will be equal to the longest of the snippets, meaning the very short ones would still occupy a line while there can be 3-4 of those short things on one line in real life.

    to better understand, imagine a form that you fill up and check some checkmarks
    imagine the form is..

    ( the []'s are checkboxes)
    -------------
    what colors do you like ?
    [] red
    [] green
    [] white
    [] blue
    [] black
    [] purple
    [] light yellow
    [] orange
    [] very dark red
    -------------

    so now, when you choose some of those colors, the script will generate a PDF based on your output, and i of course want the PDF to be as compact as possible. That is why i would NOT put every answer on a single line, instead i would want it to appear something like this

    -------------
    [] red [] blue [] black
    [] very dark red
    [] green [] light yellow
    -------------


    but NOT something like this
    -------------
    [] red [] blue [] black [] very
    dark red [] green [] light
    yellow
    -------------

    and i can not predict a place for each answer because i don't know how many colors will you choose .. you may choose only 2, you may choose all of them .. i simply don't know
    hope this makes it clearer

     
    stats, Jan 20, 2012 IP
  16. guardian999

    guardian999 Well-Known Member

    Messages:
    376
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #16
    Hello,

    refer to this thread http://forums.digitalpoint.com/showthread.php?t=2380579

    [​IMG]

    Maybe this code will solve your problem.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style media="all">
    .unchecked {
    	white-space: nowrap;
    }
    </style>
    
    <body>
    <table width="600" border="1" cellspacing="0" cellpadding="0">
    <table>
      <tr>
        <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Red</span>
      </td>
    <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Blue</span>
    </td>
    <td>
     <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Dark</span>
    </td>
    </tr>
    <tr>
    <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Very Dark</span>
    </td>
    </tr>
    <tr>
    <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Green</span>
    </td>
    <td>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" /> Light Yellow</span>
        </td>
      </tr>
    </table>
    </table>
    </body>
    </html>
    
    
    PHP:
     
    guardian999, Jan 21, 2012 IP
  17. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #17
    Just one question, is using tables, spans and only existing styles a must, or we can reformulate the entire code?
     
    wiicker95, Jan 21, 2012 IP
  18. zappak

    zappak Active Member

    Messages:
    366
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    80
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #18
    yes..... just use span tag into table tags.. that's easy :)
     
    zappak, Jan 21, 2012 IP
  19. stats

    stats Well-Known Member

    Messages:
    586
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #19
    For the reasons explained above in this thread, there can not be table cells .. if it was about table cells, i would have done it without posting anything here .. It should be continued text, and not a text split by fixed positions of table cells.. tables simply not a solution to this

     
    stats, Jan 22, 2012 IP
  20. guardian999

    guardian999 Well-Known Member

    Messages:
    376
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #20
    If you don't want a table, you can use div
    [​IMG]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style type="text/css" media="all">
    span.unchecked {
    	white-space: nowrap;
    }
    </style>
    
    
    <body>
    <table style="width: 100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td><div style="width:100%;padding: 0;margin: 0;">
    <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span><span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
    <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
    </div>
    <div style="width:100%;padding: 0;margin: 0;"><span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
    </div>
    <div style="width:100%;padding: 0;margin: 0;">
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
          <span class="unchecked"><img src="http://208.115.224.243/checked-inline.gif" width="8" height="8" />this line should not break</span>
    </div>
        </td>
      </tr>
    </table>
    </body>
    </html>
    
    PHP:
     
    guardian999, Jan 23, 2012 IP