Web Analytics Made Easy -
StatCounter Obtaining a “Postcard Effect” in Flexbox but wait, it’s complicated . . . - CodingForum

Announcement

Collapse
No announcement yet.

Obtaining a “Postcard Effect” in Flexbox but wait, it’s complicated . . .

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    And here is what the PDF looks like. I apologize that I’ve inadvertently uploaded multiple versions (?) trust me: this is only one page.

    Click image for larger version  Name:	LABEL SHEET ver. 95 semicodin.png Views:	0 Size:	98.5 KB ID:	2435862
    Attached Files
    Last edited by semicodin; Jun 16, 2022, 10:15 PM.

    Comment


    • #17
      About that @media rule: it may look strange here because this forum software strips tab characters and everything starts at the beginning of the new line but with media queries you inevitably end up writing two closing brackets one after another. Here, a better formatted example that points out the hierarchy:
      Code:
      @MEDIA PRINT {
        body {
          …
        }
      }
      For every opening bracket there must be a closing bracket.

      I’m not sure how you’ve produced this PDF but if I use your code and tell Firefox to print the page I’m getting this (see attachment).
      Attached Files
      Stop solving problems you don’t yet have!

      Comment


      • #18
        Okay – the bracket. So that I understand what is closing what, the bracket sitting directly above @PAGE . . . Is that closing the html, body or the @MEDIA PRINT? Or wording it differently, the very last bracket – which of the two lines with @ is that closing?

        Stephan I am on an Android SmartPhone. Google has disabled the ability to view HTML locally and thus far I have found exactly one browser that overrides the block and can open an HTML file stored locally on either my SD card or my phone’s internal storage: a little gem called ‘Pure Browser’
        https://play.google.com/store/apps/details?id=pure.lite.browser&hl=en_US&gl=US Firefox (for Android) is my primary browser btw. It’s what I’m viewing your forum with (on my SmartPhone).

        The larger question is: how do I define the rows in this label sheet? Without the rows the design breaks. There should be exactly 6 columns per line: 3 Postcard-like “sets” that each contain a TO: a FROM: and the black line to the left of TO: – which needs some margin love btw (it shouldn’t be jammed up against the addressee content).

        Using a + sign to indicate a column each row should look like this –
        +FROM: (postcard line) +TO: +FROM: (postcard line) +TO: +FROM: (postcard line) +TO:
        . . . each row flowing down the length of the paper


        – 3 sets-per-row. I probably should have specified: I do not want them to WRAP; I want each line hard coded as a ROW.

        I will hunt down how to define a ROW in Flex but I am totally out of my league here. Again skipping over the Third Rail of absolute zero margins: I must have them, and once my blank canvas is the largest it can be, can go in and set up margins from absolute zero coordinates. And space left & right of column 2 of course. Look at my graphic, it’s crude but recognizable!

        How to define a ROW. That is the question!
        Last edited by semicodin; Jun 17, 2022, 11:21 AM.

        Comment


        • #19
          Originally posted by semicodin View Post
          The larger question is: how do I define the rows in this label sheet? Without the rows the design breaks. There should be exactly 6 columns per line: 3 Postcard-like “sets” that each contain a TO: a FROM: and the black line to the left of TO: – which needs some margin love btw (it shouldn’t be jammed up against the addressee content).
          And that's where the advice I'm trying to give you comes in, and why this keeps biting you. You're THINKING in rows. Lose the row-level containers entirely and let natural HTML wrapping -- in this case flex-wrap -- do the heavy lifting for you!

          Let's do a rewrite now that you almost have enough text there to be treated as content.

          First off let's clean up your document header.

          Code:
          <!DOCTYPE html><html lang="en"><head>
          
            <meta charset="utf-8">
            <meta
              name="viewport"
              content="width=device-width,height=device-height,initial-scale=1"
            >
          
            <link
              rel="stylesheet"
              href="print.css"
              media="print"
            >
          
            <title>Layout Demo</title>
          
          </head><body>
          I condense the doctype through head opening to a single line as a gentle reminder these tags must appear in this order and NOTHING should EVER be pasted between them. I do the same with </head><body> and </body></html>

          The charset meta must be first, so I put all the meta together first. The viewport META tells mobile devices not to try and adjust our style with their own rules.

          The stylesheet link is for print. Keep print and screen separate and you'll have a lot easier a time of things, without any of that @print nonsense.

          All pages should have a h1, we'll hide it for print. Then the MAIN section contains a DIV to declare all your wrapping behaviors inside:

          Code:
            <h1>Layout Demo</h1>
          
            <main>
          
              <div id="toFrom">
          Inside div#toFrom all we need to do is make each of your "pairs" be articles inside a section, each article topped by a numbered heading. The data appears to be a list, so use the unordered list tag. AGAIN, this is why semantics and knowing what the content is ends up important!

          Code:
                <section>
                  <article>
                    <h2>From: Set 1</h2>
                    <ul>
                      <li>Return Line 1</li>
                      <li>Return Line 2</li>
                      <li>Return Line 3</li>
                      <li>Return Line 4</li>
                      <li>Return Line 1</li>
                    </ul>
                  </article><article>
                    <h2>To:</h2>
                    <ul>
                      <li>Addressee 1</li>
                      <li>Addressee 2</li>
                      <li>Addressee 3</li>
                      <li>Addressee 4</li>
                    </ul>
                  </article>
                </section>
          Proper semantics, it's that important and it means no DIV soup, no pissing all over the place with "classes for nothing", and results in a cleaner, clearer, easier to follow code!

          For the print CSS, let's start out with a simple reset.

          Code:
          html,body,div,p,h1,h2,h3,h4,h5,h6,
          ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
          table,tr,td,th,address,blockquote,img {
            margin:0;
            padding:0;
          }
          
          *, *:after, *:before {
            box-sizing:border-box;
          }
          This avoids the headaches the "universal reset" can cause with things like form elements.

          I'm going to style this on the assumption you've turned default margins and headings off in your print options. The next "big mistake" you made is assuming page size and trying to set mm and in and px in a willy-nilly mix. Pick a unit of measure. In this case I'm going to use inches and points (1/72th of an inch). I'll also be padding things slightly just for clarity.

          First the body and we'll hide the header.

          Code:
          body {
              padding:0.5in; /* more printers won't go edge to edge */
              font-size:4.5pt;
              line-height:5pt;
              background:#FFF;
          }
          
          h1 {
              display:none;
          }
          Note that anythign below 9pt is generally considered broken inaccessible garbage, but that's what your 6px translates to assuming 16px == 1REM defaults. An assumption we should never make. Most browsers have a 9px minimum size limit on fonts for screen, and anything below 10pt/12px for default metrics is considered useless junk you shouldn't use.

          But I left it with what you declared... seriously though, you should be designing as if 10pt is the smallest size allowed for print.

          The half inch padding assumes again that you have default browser padding/margins and headers disabled in your print settings.

          Next up the outer container:

          Code:
          #toFrom {
              display:flex;
              flex-wrap:wrap;
              gap:0.125in;
          }
          Flex wrap will make them wrap when there's more than fit on a line. Instead of thinking in rows, think in terms of your semantic items and let flow do it's job!

          Then we adjust the headings and list behaviors

          Code:
          #toFrom h2 {
            font-size:inherit;
          }
          
          #toFrom ul {
            list-style:none;
          }
          Each of the sections is also a flex container
          Code:
          #toFrom section {
            display:flex;
            width:2.25in;
            max-width:100%;
          }
          The 2.25" width acts as a max-width fitting three across on a US letter document. (8.5x11) after our quarter-inch gaps and half-inch paddings.

          Finally the articles:
          Code:
          #toFrom article {
            flex:1 0 auto;
            padding:4pt;
          }
          
          #toFrom article + article {
            border-left:1pt solid #000;
          }
          flex-grow so they both fit evenly, padding so things are better defined / not running up to the borders, and have each article after the first put a border on the left.

          Easy-peasy lemon squeezy.

          Live Demo Here:
          https://cutcodedown.com/for_others/semicodin/print/

          This is about what you're looking for it to do, right?
          https://cutcodedown.com/for_others/s...rint/print.pdf



          Walk the dark path, sleep with angels, call the past for help.
          https://cutcodedown.com
          https://medium.com/@deathshadow

          Comment


          • #20
            Alright, this is a tricky thing to visualize so here is a graphic that’s (almost) to scale . . . complete with CUT MARKS! Who loves you baby!

            Click image for larger version

Name:	POSTCARD SHEET wCut Marks by semicodin.jpg
Views:	20
Size:	283.9 KB
ID:	2435870

            Comment


            • #21
              DEATHSHADOW. A solution? You’re posting a solution?

              Now that I've picked my jaw up off the ground . . .

              Lose the row-level containers entirely and let natural HTML wrapping -- in this case flex-wrap -- do the heavy lifting for you!
              DS. The reason I don’t want to WRAP is because I want the template to be flexible enough for me to slip in both alternate Addressee content (and even alternate FROM content). A better way to describe this might be that whatever changes I make to one single Postcard block I want to make sure that it doesn’t jump its boundary and alter other labels that come after it. If it needs to consume 2 blocks then I’ll remove one of the blocks to keep it clean. Always treat these cards in unified blocks. Hope that makes sense.
              Last edited by semicodin; Jun 17, 2022, 01:48 PM.

              Comment


              • #22
                This makes for interesting reading but it is your design, not mine, and you may recall I don’t work with the designs of others, only my own. You can ignore the following; it’s moot.

                ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                Deathshadow did opine:
                The viewport META tells mobile devices not to try and adjust our style with their own rules.
                DS I’m afraid the tautology of this comment obliges that you explain . . . uh, wtf you are explaining (see, now you’ve got me doing it). Get out your “Eats, Shoots & Leaves” and please carefully explain because I only barely understand Viewport (no, don’t explain it here please; it may take my right-brained mind years to completely understand the damn thing.)

                The device has rules?
                The page designer has rules?
                The page visitor has rules?

                Who are you addressing? Who’s ruling whom? Who owns the rules? What are the rules? Be very careful about constructing your comments re Viewports or I won’t be the only one confused. And would a better word in this context perhaps be “conditions” (a binary choice that is either True or False)? I’m only trying to understand your comment because it is in danger of eating itself before I even figure out who’s talking.

                If the code isn’t the rules – if in fact the device has “rules” – then are you more accurately talking about limitations? capacities?
                Last edited by semicodin; Jun 17, 2022, 07:30 PM.

                Comment


                • #23
                  Originally posted by VIPStephan View Post
                  I’m not sure how you’ve produced this PDF but if I use your code and tell Firefox to print the page I’m getting this (see attachment).
                  Stephan, I got that output because I pasted in your snippet, structured thus:
                  Code:
                  #flexible > * {
                  display: flex;
                  justify-content: space-around;
                  width: 100%;
                  }
                  My ID was in all caps (#FLEXIBLE) so the browser didn’t recognize it. Easy to overlook, it’s corrected now and prints to a PDF exactly the way yours does off of Firefox. To refresh, I inserted those plain DIVs where the 3 rows used to be and you see the predictable outcome! Never a dull moment. Still, glad to see my little Pure Browser rendered true to Firefox. At least they’re failing in unison!

                  Comment


                  • #24
                    Originally posted by semicodin View Post
                    DEATHSHADOW. A solution? You’re posting a solution?
                    I post lots of solutions for people all the time. My entire /for_others directory is filled with them. The problem is you fail to provide actual content or anything remotely resembling actual content, you're screwing around with appearance before you even have semantic markup, you continue to use outdated outmoded rule violating practices, and then you throw hissy fits whenever presented with the fact there are RULES for using web technology. There are RULES about things like accessible font-sizes and colours. Many of these rules are created after long studies such as usability groups and enforced by laws or company policies.

                    Lands sake it wasn't until the fifth or sixth reply to this thread I was able to decipher you were trying to print address labels, because you keep saying "post card", an item that has a photograph on one side and a recipient address on the other. with return to sender being pointless since real post cards are incinerated when undeliverable. Or at least they were back when "real" post-cards included shipping in the sale price.

                    Rules you're violating like the minimum font-size since your 6px rubbish works out assuming the 16:12 ratio of px to pt at the "normal" 16px font size, since that's 4.5pt.

                    Why is that a big deal? At that point size your post cards are going to the dead letter office for illegible labels. Have you bothered looking at USPS minimum requirements and recommendations? Or whatever is relevant to your country of origin?

                    Because they recommend 8pt as minimum, reject anything below 6pt.

                    You also failed to mention what you're printing TO. If you think putting two addresses (to/from) on 2.5 to 2.63" wide label is going to be viable and have any chance of reaching a destination you're being delusional. And being postcards if they are within the reduced post limits don't think they'll be returned to sender anyways so you'll have no clue they black-holed.

                    But you're not going to listen to any of that because of your "my design screw everyone else" attitude. And that is why you're setting yourself up for struggle.

                    Even your incorrect terminology confuses the hell out of those trying to help you. For example I think I misunderstood your "addressee 1" lines because an addressee is the person or recipient. I coded it from that perspective where I thought you meant:

                    Code:
                    To:
                    Jimbo Jones
                    Bart Simpson
                    Patrick Bateman
                    Bruce Wayne
                    When what you probably actually meant was:
                    Code:
                    Knight School for Wayward Girls
                    222b Baker Street
                    Las Vegas, Nv 88901
                    The first is a list of addressee's, the second is an address. AGAIN where actual content or something that looks like actual content would have resulted in you getting help faster, better, etc. This screwing around with appearance before you give us that information is what's making everything you're doing take too long, preventing you from getting real answers, etc, etc.

                    Or getting just plain wrong answers!

                    Originally posted by semicodin View Post
                    I want to make sure that it doesn’t jump its boundary and alter other labels that come after it.
                    I have absolutely no clue what you mean by that. Like a lot of what you're saying it sounds like you're expecting everyone to magically read your mind... or doing things that make next to no sense.

                    Though that brings us back to just exactly what are you trying to print these on? Something like Avery 5160? If so that's too small to have two addressses on it and you're guaranteed to have your cards not delivered. Rather than 2.63x1 you should be looking at 5162? Those at 4"x1.35" would be far better suited for the data you're presenting if this is for actual mail.

                    As to viewport and mobile, another little "Wah wah is not" hissy fit isn't going to help you. Each CSS style is called a "rule". Thus a stylesheet is filled with "rules" of what things look like. These rules are grouped by selectors, containing an attribute and a value. If you omit a viewport meta mobile browsers will apply their own rules -- STYLES if you prefer -- over whatever you declare on the assumption what they have is not designed for mobile devices. Including a viewport META tells them we know what we're doing.

                    But your continued butthurt over the mere use of the word "rules" just made you knee-jerk into not even understanding the simplest of words and how they are used in HTML/CSS.

                    You might want to consider there are people in this world other than yourself, and the entire point of design is to reach those people, not stroke your own ...ego. I mean something else, but I'll say "ego" to be polite.

                    Anyhow sure, continue to be a narcissist screaming "Screw the world and everyone else" and shove two addresses into a 2.63x1" space and see how well it works out for you.
                    Walk the dark path, sleep with angels, call the past for help.
                    https://cutcodedown.com
                    https://medium.com/@deathshadow

                    Comment


                    • #25
                      Okay we have liftoff Houston. 🚀 The fix was to make flex-direction: column

                      Code:
                      #FLEXIBLE {
                      display: FLEX;
                      flex-direction: column;
                      justify-content: SPACE-EVENLY;
                      flex-wrap: NOWRAP;
                      }
                      I’m next going to pull this into the Real World and give it the Full Monty: Correct font sizes, margins etc. and if it goes well I'll validate with W3 and return here to post the (anonymized) code.
                      Last edited by semicodin; Jun 17, 2022, 08:38 PM.

                      Comment


                      • #26
                        Hopefully you made that stuff upper-case for posting here and not in the live code. You seem to do that a lot, making things upper-case that shouldn't be.

                        Beware printing is a precarious proposition... it's unreliable cross-browser, you have to manually configure settings if trying for "perfect layout". I assume you at least figured out how to kill off default formatting from the print options in whatever browser you're using?
                        Walk the dark path, sleep with angels, call the past for help.
                        https://cutcodedown.com
                        https://medium.com/@deathshadow

                        Comment


                        • #27
                          Here is where I’m stuck: How do I force all of the columns to align to the top?

                          I’m increasingly wondering if this entire project wouldn’t be better if done as a plain old table . . . ? My latest screenshot is attached. It appears to render render better with justify-content: space-around; btw

                          Should I just make a table? I could at least exercise control over my vertical alignment tsk.

                          Click image for larger version

Name:	Postcards 94 semicodin.jpg
Views:	16
Size:	217.9 KB
ID:	2435891

                          Last edited by semicodin; Jun 18, 2022, 04:27 AM.

                          Comment


                          • #28
                            Space-around and/or space-evenly are going to create that problem, as it overrides align-items and justify content... though are you trying to flat wrap each of the columns, or are you pairing them as per my example? Are you wasting time trying to manually add row wrappers, or are you just letting flow do it's job?

                            I still have no idea what your objection to letting flow do its job with wrapping is. Also not sure what your long line policy is, height restriction since you're likely talking pre-cut labels, etc, etc... and can you tell us what size labels you're actually printing to? Are you indeed aiming for 5160 where fitting to / from in the same area in side-by-side is unmailable?

                            Which of the code are you using here? Again, no code and some picture tells us NOTHING! It becomes a "this is why we can't help you!"
                            Walk the dark path, sleep with angels, call the past for help.
                            https://cutcodedown.com
                            https://medium.com/@deathshadow

                            Comment

                            Working...
                            X