DOCSLIB.ORG

Sérgio Nunes

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Sérgio Nunes CSS Lab. Bases de Dados e Aplicações Web MIEIC, FEUP 2010/11 Sérgio Nunes 1 Summary • Quick Overview • The CSS Language • CSS Selectors & Properties • The Box Model • CSS Positioning • A Note on CSS3 2 Quick Overview 3 The Big Picture • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. • Client-side technology used to format the presentation of web documents. Can exist within a HTML document or be referenced by it. 4 HTML + CSS HTML only 5 Original Vision • HTML for content and structure. • Presentation is left to the user allowing local configurations. Each user has its settings. • However, web authors want to control presentation. Browsers introduced tags and attributes. • HTML language "degenerated" to also include presentation markup. <b>...</b> <i>...</i> <font size="x"...>...</font> <blink>...</blink> 6 Problems • Bloated code. No "separation of concerns". • Difficult to redesign. • Difficult to support different devices. • Content formatted to a given form. • Hard coded decoration and layout - bad! 7 Motivation for CSS • Separate structure from presentation. • Different tools for different skills. Content versus Design. • Avoid redundancy. Centralized rules for presentation. Control multiple HTML documents with one CSS file. • Easier support for different devices (e.g. mobile, desktop, print, web). • Simpler maintenance. 8 HTML CSS A CSS B CSS C From "css Zen Garden: The Beauty in CSS Design" http://www.csszengarden.com/ 9 CSS Document A CSS document is a text document containing CSS rules. CSS rules can also be directly included in a HTML document. 10 CSS Specifications • Cascading Style Sheets at CERN (1994). http://www.w3.org/People/howcome/p/cascade.html • CSS 1 published as a W3C Recommendation in 1996. • CSS 2 published as a W3C Recommendation in 1998. • CSS 3 published as W3C Working Draft in 2000. • CSS 2.1 published as W3C Working Draft in 2002. 11 The CSS Language 12 Applying CSS 13 Cascading Style Sheets • Three different levels of styles (cascading): • Inline - element level. • Internal - document level. • External - site level. 14 Inline Styles • HTML elements can be directly styled using the style attribute. <h1 style="color: red;">A Title</h1> <em style="font-weight: bold;">this is important</em> 15 Internal Styles • Style sheets can be embedded into the head element of a HTML document. <head> <style type="text/css"> h1 { CSS color: red; } HTML em { font-weight: bold; } </style> </head> 16 External Styles • Both inline and internal rules cannot be reused across a site. • Using external styles, CSS rules are included in a specific CSS file and linked to HTML documents. <link rel="stylesheet" type="text/css" rel="path/to/file.css"> HTML HTML CSS HTML 17 Priorities • Browser defaults. • External style sheets. • Internal styles. • Inline styles. 18 CSS Syntax 19 CSS Files • A CSS file (style sheet) consists of a list of rules (or statements). • Each rule consists of one or more selectors and a declaration block, enclosed in curly brackets. • Each declaration consists of a property, a colon (:), a value and a semicolon (;). 20 Anatomy of a Rule Selector(s) body { font-family: Verdana, Arial, sans-serif; Properties font-size: 12px; color: grey; } Values 21 Coding Conventions • CSS files can have comments that are ignored by the browser. Useful for documenting or organizing code. /* This is a /* This is a comment */ multiline comment */ • Layout CSS rules in multiple lines for improved readability. Use a single line in special cases. h1 { font-size: 18px; .alert { color: red; } text-align: center; } 22 CSS Selectors 23 CSS Selectors A CSS selector identifies an object on a web page to which CSS declarations are applied. body { div.nav p strong { color: red; color: yellow font-family: Arial; } font-size: 18px; } 24 Type Selectors • HTML Elements as selectors. • Used when you want to affect every instance of a HTML element. h1 { color: red; } p { color: black; } img { border: none; } div { border: 1px solid black; } 25 Class Selectors • How to change a specific instance of an element? For instance, how to style the 2nd paragraph only? • It is possible to define classes in CSS and apply them to HTML elements. A given class can be used multiple times on the same document. .current {} <h2 class="title">...</h2> .title {} <p>...</p> CSS file <p class="current">...</p> <p class="current">...</p> HTML document 26 Using Class Selectors • Class selectors can either be applied to all elements of a given class, or only applied to a specific HTML element of that class. p.current {} .current {} h2.current {} .title {} p.title {} 27 Multiple Classes • A single HTML element may be associated with multiple classes, separated by spaces. .current {} <p class="current">...</p> .note {} <p class="current">...</p> CSS file <p class="current note">...</p> HTML document 28 ID Selectors • ID selectors are similar to class selectors, except that they can only be applied to exactly one element on a page. One ID per document. • ID selectors are defined in CSS with '#', and applied to elements with the 'id' attribute. #active {} p#footer {} <p id="active">...</p> div#footer {} <div id="footer">...</p> CSS file HTML document 29 ID and Class Naming • ID and Class names can contain lowercase letters, uppercase letters, digits, underscores and dashes. Cannot start with digits. .current #Header1 .itemTitle #item-title • Names should define function, not appearance. • Good: header, footer, active, note. • Bad: italic, red, big. 30 Descendent Selectors • Can be used to select an element based on its position within the document's HTML structure, e.g. paragraph inside div 'footer'. a {} p a {} p.current a {} ul li a {} #footer .note em a {} 31 Link Pseudo Class Selectors • Link pseudo class selectors are used to select links in a number of different states. Links have 4 states: • normal — standard, unvisited link. • visited — visited link. • hover — when the cursor is over the link. • active — while the link is being clicked. a:link {} a:visited {} a.note:link {} a:hover {} May be combined with class selectors. a:active {} 32 Pseudo Element Selectors • Two types of pseudo element selectors :first-line :before :first-letter :after • first-line — selects first line of element. • first-letter — selects first letter of element. • before — inserts content before the element selected. • after — inserts content after the element selected. 33 p:first-line { text-transform: uppercase; } Hello world, this is my first HELLO WORLD, THIS IS CSS rule using pseudo my first CSS rule using element selectors. pseudo element selectors. p:first-letter { font-size: 2em; } Hello world, this is my Hello world, this is my second CSS rule using second CSS rule using pseudo element selectors. pseudo element selectors. 34 h1:before { content:"Chapter: "; } Introduction Chapter: Introduction a:after { content:attr(href); } U.Porto U.Porto http://www.up.pt 35 Grouping Selectors • Different selectors may be grouped in a single CSS rule, using commas. ul li { color: red; margin: 5px; } p { color: red; } h1 a { color: red; } .new { color: red; } ul li, p, h1 a { color: red; } ul li { margin: 5px; } 36 Universal Selector • The universal selector matches the name of any element. It selects any single element from the document. * { font-family: Verdana, sans-serif; } * { margin: 0; padding: 0; } 37 Child Selectors • A child selector matches when an element is the direct descendent (child) of some element. p > a {} ul > li {} 38 First Child Selectors • The first child selector matches an element that is the first child of some element. The first child of any parent, not the first child of an element. p:first-child {} p:first-child em {} 39 Adjacent Selectors • Adjacent (sibling) selectors matches an element that immediately follows another element at the same level. strong + em {} Matches em elements that follow strong elements ul + p {} Matches paragraphs that immediately follows lists 40 Attribute Selectors • Attribute selectors matches elements that have specific attributes defined. • Attributes may match in four ways: • [att] — match when attribute att is set. • [att=val] — match when attribute att has value val. [att~=val] — match when attribute att includes • the val keyword among a space separated list. [att|=val] — match when attribute att includes the • val keyword among a dash separated list. 41 h1[title] <h1 title="Portugal">...</h1> <h1 class="some">...</h1> h1[title="Porto"] <h1 title="Porto">...</h1> <h1 title="Portugal">...</h1> h1[title~="Porto"] <h1 title="Porto Portugal">...</h1> <h1 title="Porto-Portugal">...</h1> h1[title|="Porto"] <h1 title="Porto Portugal">...</h1> <h1 title="Porto-Portugal">...</h1> 42 Advices • Don't "over DIV" your page. Keep it simple. • Reuse HTML native elements if adequate. • Don't "over class" your CSS. Use advanced selectors. • Group selectors in common rules. 43 Text Formatting 44 Color Property • The color property sets the foreground color of an element (i.e. text). • The color property can be set by different ways: keyword, RGB code, Hex code. Keyword: RGB code: Hex code: black rgb(100%, 40%, 0%) = rgb(255, 102, 0) #326432 yellow rgb(40%, 20%, 20%) = rgb(102, 51, 51) #0088ff red #000000 blue 45 Text Properties • text-indent: specifies the indentation of the first line of the text in a block. • text-align: describes how inline content of a bloc container is aligned (left, right, center, justify). • text-decoration: decorations added to the text (underline, overline, line-through). • text-transform: controls the capitalization effects of text (capitalize, uppercase, lowercase). 46 Text Properties • letter-spacing: spacing behavior between text characters. • word-spacing: spacing behavior between words. • line-height: minimal height of lines within a block element. • vertical-align: specifies the vertical position of content within a block element. 47 Font Properties • font-family: prioritized list of font family names and/or generic names. • font-style: selects between normal and italic faces within a font family.
Load more

Recommended publications
  • Free Download Arial Unicode Ms.Ttf
    Free download arial unicode ms.ttf click here to download www.doorway.ru Arial Unicode MS font preview. www.doorway.ru Arial Unicode MS font preview. Download font - MB. At www.doorway.ru, find an amazing collection of thousands of FREE fonts for Windows and Mac. Arial Unicode MS ( downloads) Free For Personal Use. Download arial unicode ms font free at www.doorway.ru, database with web fonts, truetype and opentype fonts for Windows, Linux and. Typographic info for the Arial Unicode MS font family. Purchase & Download Microsoft fonts for personal, professional or business use on. Download the Arial Unicode MS free font. Mac, Linux; ✓ for programs: Microsoft Word, Photoshop, etc; ✓ free download. Arial Unicode www.doorway.ru, MB. Download Unavailable. Arial Create a Logo Using Arial Unicode MS You may need to extract www.doorway.ru files from www.doorway.ru archive file before installing the font. Description: Where can you get the Arial Unicode MS font? Resolution: www.doorway.ru file (the Arial Unicode MS font) needs to be in the PC's. Download Arial Unicode MS Regular For Free, View Sample Text, Rating And More On www.doorway.ru View and Download Arial Unicode MS Version CartoCSS port of Toner. Contribute to stamen/toner-carto development by creating an account on GitHub. toner-carto/fonts/www.doorway.ru Fetching contributors Cannot retrieve contributors at this time. Download History. executable file MB. View Raw. Arial Unicode MS Regular truetype font page. Coolest truetype fonts. Best free fonts download. View font details, character map, custom preview, downloads, file contents Arial Unicode by Agfa Monotype Corporation TTF, 22 MB, Font File, download .
    [Show full text]
  • Elementi Di Tipografia Digitale Obiettivo Della Lezione Rappresentazione
    Obiettivo della lezione • La codifica digitale del testo – Rappresentazione dei caratteri – Codifiche aggiuntive • Le fonti digitali • Attributi delle fonti • Tecnologie per fonti digitali Elementi di tipografia digitale Rappresentazione del Alcune lingue del mondo testo mediante caratteri • Il testo è una rappresentazione visuale del linguaggio parlato • Ma è anche un oggetto grafico • Il testo si produceva a mano (amanuensi) • Verso il 1450 Johann Gutenberg introdusse la stampa a caratteri mobili, rivoluzionando la produzione di testi Bibbia Mazarina 1 I metodi di scrittura nel mondo Osservazioni sui metodi di scrittura • Lineabase • Contesto • Riordinamento • Direzione Caratteri mobili Digital divide tra le lingue • Misurati in “punti” (1/72 inch) • Nei libri il testo è di solito a 8-12 punti • La dimensione in punti definisce di solito la minima spaziatura verticale della riga di stampa • Fonte. Yoshiki Mikami, Digital Divide among Languages, Bulletin of Language Science and Humanities, Nagaoka University of Technology, No.14, 2000, pp.83-94 2 Insiemi di caratteri nei computer Insiemi di caratteri • I sistemi informatici vengono impiegati per • L’insieme di caratteri oggi più diffuso è produrre testo lo standard 7-bit ASCII • Esistono codici che rappresentano i caratteri • ASCII è limitato a 128 caratteri; viene mediante numeri binari esteso con un bit per superare questo • La relazione (o codice) tra caratteri e numeri limite, ma l’estensione non è standard binari si chiama insieme di caratteri • Nuovi standard: • La IBM definì il
    [Show full text]
  • Best Font Style to Use for Resume
    Best Font Style To Use For Resume acridUnrepugnant Ruben gripes Brandy glissando. singularizing Dieter that is ideographsfree-and-easy: aims she shakily bestriding and alkalifies depreciatingly tenaciously. and begirding Oncogenic her Tylerdiversion. chimneyed some bands after Pick one font for your capture and section headings and another, complementary font for the rest alongside your content, Yurovsky says. Our default font but today is professional resume best font to use for style, interests section titles of hiring professionals. Corporate brand logos often use Helvetica. PDF files, MS Word documents, text files, parsing software, etc. My resume because now one old long, the three. The first application, who have to use font to for best style resume builder and do have to? Pairing fonts together which help desk cover letter like resume on shine. It a hard to best font to use for resume style, noting that you! Serif has traditionally been often most recommended font family for creating resumes. Arial: A popular and warm choice only a modern sans serif font, Arial is applauded for clean lines and good legibility. The lines in Arial are cleaner and straighter, with no tails. As with font type, the rod here by for get resume still be readable. They even cause scanning software often make errors and talk your resume. Then police might want to scorn it. By war looking again it on paper, you may i able to request it event at precious glance. Atque ipsum quas quis repellat voluptate. They sink that rule most professional font for resume states itself nor a unique, authoritative and modern tool for benefiting an outline.
    [Show full text]
  • Georgia Alien Heads Found In
    TYPE SPECIMEN alien heads found in Georgia KAYLEE GRODSKE Georgia bold 64 pt Contents page contents 5 Introduction 7 Backstory 9 Alien Heads Found in Georgia 10 Compare 12 Various Cuts 14 Type Features GeorgiaGeorgia GeorgiaGeorgia Georgia Georgia bold 72 pt Georgia Although inspired by the need for - and providing - clarity at low resolutions on the screen, Georgia is a typeface resonant with typographic personality. Even at small sizes the face exudes a sense of friendliness; a feeling of intimacy many Georgia would argue has been eroded from Times New Roman through overuse. This is as much testament to the skill of the typeface’s designer, Matthew Carter, as it is to any intrinsic quality of the face’s design, since the small pixel spaces of the screen can be a harrowing canvas for any type designer. In Georgia, Carter has successfully managed to create a typeface family which combines high legibility Georgia with character and charm. Georgia4 5 GeorgiaGeorgia Georgia bold 58 pt Backstory Designed in 1996 by Matthew Carter. Georgia is the serif companion to the first Microsoft sans serif screen font, Verdana. It was designed specifically to address the challenges of on-screen display and hand-instructed by leading hinting expert, Monotype’s Tom Rickner. Georgia was jokingly named after a tabloid headline ‘Alien heads found in Georgia.’ If you must have one serif face for reading on a computer, then you’ve found the best one right here. At high resolutions and larger sizes on screen, it’s evident that Georgia’s ancestory is essentially that of Didot and - most noticeably - of Scotch Roman.
    [Show full text]
  • Macos Font Management
    BEST PRACTICES GUIDE macOS Font Management North America 1.800.796.9798 // Europe +44 (0) 1604 654 270 // 061421 // extensis.com 03 Why Do You Need To Manage Your Fonts? The Best Practices for Effective Font Management About This Guide Conventions Used in This Guide 04 Collect Your Fonts Back Up Your Files Check for Operating System and Application Updates Clean Font Caches Clean Up Your System Fonts 07 Clean Up And Organize Your Fonts Identifying Damaged and Incompatible Fonts Replacing Older Fonts Identifying Duplicate Fonts 08 Manage Your Fonts With Suitcase Fusion Adding Your Fonts Creating and Deleting Sets Managing Duplicate Fonts 09 Make A Plan For The Future Backing Up Your Fonts Getting New Fonts Now What? 11 Appendix A: The Hidden User Library 12 Appendix B: Working With System Fonts CONTENTS 15 Contact Extensis Copyright © 2021 by Celartem, Inc. dba Extensis. All rights reserved. Disclaimer: Fonts are software and are subject to license restrictions. Any recommendations in this guide regarding moving and using fonts should be considered with respect to the license included with the fonts. North America 1.800.796.9798 // Europe +44 (0) 1604 654 270 // 061421 // extensis.com // 2 Why Do You Need To Manage Your Fonts? Your fonts are your tools; you need to know where they are, and know how and when to use them. If you have a large collection of fonts, effective font management is essential. Installing your fonts in Font Book Conventions Used In This Guide + Menu commands are indicated by a right angle bracket after the makes the font menus in your menu name (Edit > Select All).
    [Show full text]
  • Mac OS Font Managment
    BEST PRACTICES GUIDE Mac OS Font Managment North America 1.800.796.9798 // Europe +44 (0) 1604 654 270 // 070220 // extensis.com 03 Why Do You Need To Manage Your Fonts? The Best Practices for Effective Font Management About This Guide Conventions Used in This Guide 04 Collect Your Fonts Back Up Your Files Check for Operating System and Application Updates Clean Font Caches Clean Up Your System Fonts 07 Clean Up And Organize Your Fonts Identifying Damaged and Incompatible Fonts Upgrading Older Fonts to New Formats Identifying Duplicate Fonts 08 Manage Your Fonts With Suitcase Fusion Adding Your Fonts Creating and Deleting Sets Managing Duplicate Fonts 09 Make A Plan For The Future Organizing Your Fonts with FontDoctor Backing Up Your Fonts Getting New Fonts Now What? Appendix A: The Hidden User Library CONTENTS 11 12 Appendix B: Required System Fonts 15 Contact Extensis Copyright © 2020 by Celartem, Inc. dba Extensis. All rights reserved. Disclaimer: Fonts are software and are subject to license restrictions. Any recommendations in this guide regarding moving and using fonts should be considered with respect to the license included with the fonts. North America 1.800.796.9798 // Europe +44 (0) 1604 654 270 // 070220 // extensis.com // 2 Why Do You Need to Manage Your Fonts? Your fonts are your tools; you need to know where they are, and know how and when to use them. If you have a large collection of fonts, effective font management is essential. Installing your fonts in Font Book Conventions Used In This Guide + Menu commands are indicated by a right angle bracket after the makes the font menus in your menu name (Edit > Select All).
    [Show full text]
  • Verdana Pro Bold Free Download the Web’S Favorite Typefaces Go Pro
    verdana pro bold free download The Web’s Favorite Typefaces Go Pro. Georgia and Verdana rule the web. Billions of pages use these fonts, the workhorse typefaces of the web for over fifteen years. Now these families have been expanded, enhancing their role in print, web, and mobile use. Verdana and Georgia's prevalence is no accident: they were distributed widely, then relied upon by web designers for years. But their ubiquity has merit: Georgia and Verdana were two of the first typefaces created specifically for screen use. They were born from the brain and hand of distinguished type designer Matthew Carter, crafted for screen readability, especially at small sizes. The production was crowned with Tom Rickner’s exhaustive hinting for pristine display in any rendering environment. It was inevitable that these two faces would find their way into print. Unfortunately, the qualities that made them great on screen made them less than ideal on paper, especially when large. The small number of styles also limited the families’ flexibility. Many organizations, like IKEA, which call for these typefaces in their style guides have only had two weights to work with. That can’t be easy for a company with a 376-page catalog and huge facilities with complex tagging and wayfinding requirements. Starting today, relying on one’s favorite set of webfonts no longer means being confined to regular, italic, bold, and bold italic. Thanks to a partnership between Font Bureau, Carter & Cone, and Monotype Imaging, Georgia and Verdana are now extended families, enabling much more versatile use on screen and paper.
    [Show full text]
  • Schrift & Farbe Im
    Schrift & Farbe im Web | Philip Fuchslocher Schrift und Farbe im Web | www.philip-fuchslocher.de Seite | 1 von 45 Inhalt 01 | Evolution der Schrift . 2 05 | Farbe am Monitor . 31 02 | Schriftenvielfalt . 13 5.1 Farbdarstellung ................................. 32 2.1 @font-face. 14 5.2 Farbmanagement ............................... 33 2.2 Schriftlizenzen .................................. 15 06 | Barrierefreiheit . 34 2.3 Schriftquellen. 16 6.1 Barrieren vermeiden ............................. 35 2.4 Schriftformate im Web. 17 6.2 Übersicht einiger Farbfehlsichtigkeiten ............ 36 2.5 Schriften-Services ............................... 18 6.3 Kritische Farbkombinationen ..................... 37 03 | Schrift am Monitor . 19 6.3 Farben testen und korrigieren .................... 38 3.1 Optimale Schrifteigenschaften ................... 20 6.4 Praxistipps. 39 3.2 Subpixel-Rendering ............................. 21 07 | Farbpsychologie . 41 3.3 Physikalische Monitor-Eigenschaften .............. 22 08 | Weiterführende Links . 42 3.4 Unterschiedliches Browser-Rendering ............ 23 8.1 Typografie. 43 3.5 Font Specimen und Type Tester .................. 24 8.2 Farbe ........................................... 44 04 | Typografische Praxistipps . 25 Vielen Dank! . 45 4.1 Schriftgrößen und Zeilenabstand ................. 26 4.2 Silbentrennung ................................. 27 4.3 Vertikaler Rhythmus ............................. 28 4.4 Auszeichnung von Schrift ........................ 29 4.5 Praxistipps in Photoshop ........................
    [Show full text]
  • De Rede in Het Nauw
    DE REDE IN HET NAUW Norbert de Jonge en Marthijn Uittenbogaard DE REDE IN HET NAUW © 2009 Norbert de Jonge en Marthijn Uittenbogaard Omslagontwerp: idem Op dit werk is de CC-BY-NC-ND-3.0 licentie van toepassing: http://creativecommons.org/licenses/by-nc-nd/3.0/nl/legalcode Hieronder vindt u de licentiegegevens over de drie op de kaft gebruikte afbeeldin- gen en de twee gebruikte lettertypes. De afbeeldingen: ➢ De afbeelding van de klaverzuring (Oxalis tetraphylla) op de achterzijde valt onder de CC-BY-SA 1.0 (en GFDL 1.2+) licentie. De afbeelding is gebaseerd op oorspronkelijk werk ("Gluecksklee") van Wikimedia Commons gebruiker Kolossos. http://commons.wikimedia.org/wiki/File:Gluecksklee.jpg http://creativecommons.org/licenses/by-sa/1.0/legalcode ➢ De kleine afbeelding van De Denker (Le Penseur) op de voorzijde valt onder de CC-BY 2.0 licentie. De afbeelding is gebaseerd op oorspronkelijk werk ("Thinking at Hell©s gate") van Flickr gebruiker innoxiuss. http://commons.wikimedia.org/wiki/File:The_Thinker_Musee_Rodin.jpg http://flickr.com/photos/46922409@N00/308920352 http://creativecommons.org/licenses/by/2.0/ ➢ De grote afbeelding van De Denker op de voorzijde bevindt zich in het publiek domein. De afbeelding is gebaseerd op oorspronkelijk werk ("The Thinker, Auguste Rodin") van Wikimedia Commons gebruiker Karora. http://commons.wikimedia.org/wiki/File:The_Thinker,_Auguste_Rodin.jpg http://en.wikipedia.org/wiki/Public_domain De lettertypes: ➢ Het PostScript Type 1 lettertype Century Schoolbook L komt uit de Resource/ Font directory van GPL Ghostscript 8.64 en valt onder de GPL 2.0 licentie (met Font Exception). http://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/gs864/ghostscript- 8.64.tar.bz2 http://www.gnu.org/licenses/old-licenses/gpl-2.0.html ➢ Het TrueType lettertype Impact komt uit impact32.exe 2.35 en valt onder de TrueType core fonts for the Web EULA licentie.
    [Show full text]
  • 1 CHAPTER 25 TYPOGRAPHY and the PRINTED ENGLISH TEXT Will
    View metadata, citation and similar papers at core.ac.uk brought to you by CORE provided by Anglia Ruskin Research Online 1 CHAPTER 25 TYPOGRAPHY AND THE PRINTED ENGLISH TEXT Will Hill From the inception of the printed word, typography has both driven and reflected the development and formal conventions of language use. Writing systems have informed the development of type, and patterns of typographic usage have in turn influenced the practice of writing. EARLY PRINTING Gutenberg’s first printed books from 1455 onward, represent the most significant development in the history of the written word, a transition from forms created in the act of writing, to the assembly of standardized letters for print. Though he is popularly described as the inventor of printing, the press itself was the less innovative of Gutenberg’s achievements. Presses had been widely used for the stamping of metals, and for the printing of engravings and rudimentary ‘block books’ in which a page of text was engraved into a single block. The most significant innovation of the early printers, whether attributable to Gutenberg or his immediate successors, was the concept of a mould from which multiple copies of each letter could be identically cast for subsequent assembly into text. The details of Gutenberg’s working methods are unknown and widely contested, but studies of the printed outcomes indicate that he made a far greater number of variant letter shapes than were to occur in later phases of printing. His character-set incorporated differing forms of certain letters and many special letter pairings (ligatures) necessitated by the characteristics of two adjacent letters.
    [Show full text]
  • Fonts, Hot Metal Press, Desktop Publishing, Internet
    1 Typography in Graphic Design Typography is a word that has its origins in the old Greek language; typos means form and graphe means writing in Greek. So typography is a technique and an art in the same time that helps us to communicate visually our language. In order to understand typography we have to know about typeface, point size, line length, leading, tracking, kerning. Therefor I will give a short description of these terms, bellow: • Typeface is a set of characters that have a similar design. They are so many typefaces existing on the market today and new ones are being developed continuously. The art and craft of designing typefaces is called type design and the designers are called type designers. In the world of digital typography, which is so much developed today, the type designers are also called font designers or font developers. • Point size • Line length is the width occupied by a block of typeset text; it is measured in inches, picas and points. The text inside the line can be flush left (aligned to the left margin) and ragged right, flush right and ragged left or justified – all lines are equal in length and the text is aligned along both the left and right margin. • Leading is the distance between the baselines of successive lines of type. In our days, especially in word processing software, leading is known as “line spacing” or “interline spacing”. • Tracking means adjusting the space between groups of letters. • Kerning means adjusting the space between pairs of letters. • Letterform means the shape of a letter; also means the “study and design of individual letters”.
    [Show full text]
  • NRM Standards for Jasper Reports Submitter Name
    Standard Custodian Name: Todd Glover Name of Standard: NRM Standards for Jasper Reports Submitter Name: Jeff Johnson Stakeholder(s) Impacted by Change: BPMs, Technical Architects Type of Change: Low Change to Standard: Jasper Reports Server version has been updated. Removed old info relevant only to iReports report designer, which is no longer supported; Jaspersoft Studio is the current report designer. Minor changes to boilerplate text due to reorg. Changes Title Page New division and Architecture section names Section 2.5.4 CSNR changed to IIT; IMB changed to Architecture and Business Strategy Section Section 3.1 Remove info about planned update, version differences between NRSRS/JCRS. This is now done. Section 3.2.1 Updated version of Jasper Reports library Section 3.2.2 iReport is now no longer supported. Jaspersoft Studio should be used, with compatibility setting for our version of the Jasper Reports library. Section 3.2.3 Jasper Reports Server version updated Section 3.2.4 Oracle JDBC driver version added Section 3.2.5 JTDS (MS SQL Server) JDBC driver version added Section 3.4.4 Added reference to new asynchronous report request REST API Section 4.3.1 Explained that naming convention of local accounts different in JCRS & NRSRS Section 5.1.3 Recommend sessionless REST calls for most invocations. REST login is optional. Added info on new REST logout API. Removed reference to caching issue in Jasper Server 5.0; this doesn’t apply in Jasper Server 6.4.3. Section 5.1.5 SOAP API is now deprecated and not recommended Section 5.1.6 New section.
    [Show full text]