Floats, Grids, and Fonts Computer Science and Engineering n College of Engineering n The Ohio State University Lecture 14 Recall: Blocks, Inline, and Flow Computer Science and Engineering n The Ohio State University flow body inline paragraph heading horz rule blocks Floating: Remove From Flow Computer Science and Engineering n The Ohio State University width Floating: Overlays Block Computer Science and Engineering n The Ohio State University .fancy { float: left } codepen.io/cse3901/pen/bLYdLz Problem: Blocks Below Computer Science and Engineering n The Ohio State University o Floating element may be taller than containing element o May be undesirable, eg for footer that should be below everything including floats problem Solution: clear Computer Science and Engineering n The Ohio State University o Styling for block element after float #footer { clear: left; } o Requires that side to be clear of floats id="footer" CSS: Grid Layout Computer Science and Engineering n The Ohio State University o Display property for arranging elements in a 2D grid o Parent element is the grid container n Style with CSS property (display: grid) n Set number/size of rows/columns n Set gap between rows/columns o Direct children are the grid items n Set alignment, justification, placement n One item can be sized/placed to a grid area (ie a rectangular subgrid) Grid Layout: Example Computer Science and Engineering n The Ohio State University Grid Layout: Example Computer Science and Engineering n The Ohio State University .wrapper { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: repeat(4,20px); grid-gap: 20px; } <div class="wrapper"> <div>1</div> <div>2</div> … </div> codepen.io/cse3901/pen/aqVNJN Grid Areas: Example Computer Science and Engineering n The Ohio State University Grid Areas Computer Science and Engineering n The Ohio State University .top { grid-area: tp; } .sidebar { grid-area: sd; } #footer { grid-area: ft; } .wrapper { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-areas: "tp tp tp" "sd . ." "sd . ." "sd ft ft"; } codepen.io/cse3901/pen/oEoKXV CSS Units for Size Computer Science and Engineering n The Ohio State University o “Absolute” units (but browsers cheat) n in, cm, mm n pt (point) = 1/72 inch, pc (pica) = 12 pts o Absolute (for a given resolution) n px (pixels) o Relative to current element’s font n em = width of 'm' in element’s font n ex = height of 'x' in element’s font o Relative to parent (or ancestor) size n %, rem (like em, but with root’s font) o Standard advice for fonts: n Prefer relative units Aside: The Problem with Pixels Computer Science and Engineering n The Ohio State University o Historically, pixel size determined by hardware (ie screen resolution) n ppi: “pixels per inch” o Problems using px unit: n Different resolutions = different size of px n Different devices = different view distances o Solution: W3C's “reference pixel” (optics) 0.0213 degrees Fonts: Concepts Computer Science and Engineering n The Ohio State University o Fonts are a key part of visual design n Serious, technical, whimsical, friendly… o Font family (should be “typeface”) n Arial, Helvetica, Times, Courier, Palatino, Garamond, Verdana, Tahoma, Lucida,… o Font = typeface + weight, slant, etc n Normal, bold, light (CSS: font-style) n Normal, oblique, italic (CSS: font-weight) Properties and Metrics Computer Science and Engineering n The Ohio State University o Serif vs sans-serif o Kerning: proportional vs monospace o Size = ascent + descent (usually) o m-width, x-height Whitespace Computer Science and Engineering n The Ohio State University o Critical for aesthetics, readability o Margins around body text, headings o Leading n Space from baseline to baseline n CSS property: line-height o Larger x-height = easier to read n But larger x-height also requires more line spacing o “Music is the silence between the notes” Font Families Computer Science and Engineering n The Ohio State University o De gustibus non est disputandum o Nevertheless, some common opinions o Less is more: Use fewer fonts/sizes n Cohesive appearance o Helvetica/Arial: clean but ubiquitous n They are identical / completely different o Times is hard to read (on a monitor) n Better for print o Comic Sans is for 12-year-olds and owners of NBA basketball teams Identical & Completely Different Computer Science and Engineering n The Ohio State University Fallback Fonts Computer Science and Engineering n The Ohio State University o Not sure what fonts host OS will have o CSS font-family: List alternatives in decreasing order of preference font-family: Helvetica, Arial, "Liberation Sans", sans-serif; o Always end with one of 5 generic fonts: n sans-serif (Arial?) example n serif (Times New Roman?) example n monospace (Courier New?) example n cursive (Comic Sans?) example n fantasy (Impact?) example o OS (and browser) determine which font family each generic actually maps to CSS3: Web Fonts @font-face Computer Science and Engineering n The Ohio State University o Looks like a selector, but is a “directive” @font-face { font-family: HandWriting; src: url('PAGSCapture.ttf'); } o Font family then available in rest of CSS p { font-family: HandWriting; … } o User agent dynamically downloads font o Different syntaxes for font files n .ttf, .otf, .eot, .woff, .svg, … o Beware: copyright issues! n See fonts.google.com Summary Computer Science and Engineering n The Ohio State University o Images n Formats jpeg, png, gif, svg n Tradeoffs of size, quality, features o Floating elements n Removed from flow, layered on top o Fonts n Fallback fonts to account for uncertainty n Web fonts for dynamic loading.