This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ideas:image-replacement [2018/11/04 06:49] – created nhthvhvbh | ideas:image-replacement [2018/11/04 10:51] (current) – old revision restored (2007/09/10 05:02) fantasai | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | [[Playing Minecraft]] | + | ====== Image Replacement in CSS3 ====== |
+ | |||
+ | Image replacement techniques are used on many websites today to replace text, such as a header, with an image of the text rendered in a fancy font. Methods range from image tags to background images with massing negative indentation, | ||
+ | |||
+ | The CSSWG has resolved to allow the '' | ||
+ | |||
+ | <code css> | ||
+ | /* Use image, failing that use element' | ||
+ | H1 { content: url(sparkly_heading_text.png), | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Interaction with Fonts ===== | ||
+ | |||
+ | We recognize, however, that the likely set of preferences for such headings would be: | ||
+ | |||
+ | - Use the preferred font if it is installed on the system. | ||
+ | - Otherwise download the font and use it, if possible. | ||
+ | - Otherwise display the image in place of the contents, if possible. | ||
+ | - Otherwise display the contents in an available font. | ||
+ | |||
+ | The font parts (preferred font, downloaded font, available font) can be done in CSS2 with '' | ||
+ | |||
+ | At the May 2006 face-to-face meeting, the CSSWG [[http:// | ||
+ | |||
+ | The consensus on syntax was: | ||
+ | |||
+ | | ||
+ | require-font | ||
+ | require-font(< | ||
+ | require-font(< | ||
+ | Edge cases to cover: | ||
+ | require-font() | ||
+ | require-font(generic-name) (e.g. require-font(serif)) | ||
+ | |||
+ | The '' | ||
+ | |||
+ | The '' | ||
+ | |||
+ | |||
+ | ===== Unresolved Details ===== | ||
+ | |||
+ | One proposal for '' | ||
+ | |||
+ | It was assumed that '' | ||
+ | |||
+ | The spec should perhaps specify that '' | ||
+ | |||
+ | Would require-font(Arial, | ||
+ | |||
+ | ===== Examples ===== | ||
+ | |||
+ | A basic example from Ian, demonstrating a range of fallback possibilities. | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | ...with one of: | ||
+ | |||
+ | <code css> | ||
+ | h1 { content: " | ||
+ | h1 { content: url(images/ | ||
+ | h1 { content: url(images/ | ||
+ | h1 { font-family: | ||
+ | | ||
+ | h1 { font-family: | ||
+ | | ||
+ | h1 { font-family: | ||
+ | | ||
+ | h1 { font-family: | ||
+ | | ||
+ | h1 { font-family: | ||
+ | | ||
+ | </ | ||
+ | |||
+ | Another example from Bert, demonstrating the advantage of separating the method of specifying a font ('' | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | <code css> | ||
+ | h1 span { font-family: | ||
+ | h1 { font-family: | ||
+ | h1 { content: require-font(biggy) contents, url(replacement.png) } | ||
+ | </ | ||
+ | |||
+ | The '' | ||
+ | |||
+ | <code css> | ||
+ | h1 { content: require-font(biggy), | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Expected Spec ===== | ||
+ | |||
+ | Since the Generated Content module is not expected to advance at all for quite some time, this syntax is likely to be incorporated into the Fonts module. |