f16abb2f99276fcf1811ef04f4f767ce1631c4c7 kate Wed Nov 16 16:27:45 2016 -0800 Cleanup CSS. refs #17369 diff --git src/hg/hgGtexTrackSettings/README.txt src/hg/hgGtexTrackSettings/README.txt index 4c54d82..3c5f048 100644 --- src/hg/hgGtexTrackSettings/README.txt +++ src/hg/hgGtexTrackSettings/README.txt @@ -7,61 +7,61 @@ (0. Set naming convention for elements (Preferences, Units, Identify Objects By: XML ID) 1. Open file (File Open from top menu) 2. Crop to minimize whitespace and remove title (Artboards tab in right panel, crop icon) Name: BodyMap_Draft04_Cropped (or whatever) Width: 620 pt, X: 125pt Height: 750 pt, Y: 80 pt NOTE: the X, Y may need some tweaking -- use crop box viz to guide ** Alternatively, if OK to retain title in .svg, one can edit viewbox in SVG. - e.g. viewBox="70 45 605 730" + e.g. viewBox="55 45 620 730" (make sure Esophageal Junction is not truncated) 3. Save in SVG format (Save As, Format: SVG) * check Use Artboard ? - on SVG options, * SVG 1.1 * Fonts: SVG, None * uncheck 'Preserve Illustrator Editing' * CSS Properties: Style Elements * check 'Output fewer <tspan> elements * check 'Responsive' * Decimal places: 1 (or 2 for higher res) (Fonts (SVG/Only Glyphs ? -- if need to include fonts in SVG) (Use <textpath>) -- n/a here (e.g. curving text) ( Link ) -- n/a here (e.g. images embedded in illustration) From script/editor: 1. Strip XML header and comment from Adobe (first line should be <svg>) 2. Clean up identifiers (replace _x5F_ with _ if needed. Investigate/fix text ids suffixed w/ _1_. sed -e 's/_x5F_/_/g' file.svg > bodyMap.svg mv bodyMap.svg ~/kent/src/hg/htdocs/images 3. Adjust viewbox if needed -70 45 600 730 +55 45 620 730 (check aspect ratio) 4. Change fonts to match Genome Browser and generally work well with page: font-family: Lato-Regular -> Lato,Arial,Helvetica font-size: 12.5px -> 11px 5. Add CSS link to svg (just after <svg> element) <defs> <link rel="stylesheet" href="../style/hgGtexTrackSettings.css" xmlns="http://www.w3.org/1999/xhtml"/> </defs> 6. Remove Text_Lo group (or set CSS display:none)