Floats, Grids, and

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

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; }

1
2
…

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 () = 1/72 inch, pc () = 12 pts o Absolute (for a given resolution) n px (pixels) o Relative to current element’s n = 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 “”) n , , Times, , , , , , ,… 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 vs sans-serif o : 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 , headings o n Space from 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 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 (?) example n monospace (Courier New?) example n (Comic Sans?) example n fantasy (?) example o OS (and browser) determine which 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: ; 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