|
Posted by Xah Lee on September 13, 2006, 9:39 am
Please log in for more thread options
Summary: when encountering ex as a unit in css, FireFox (and iCab) did
not take into account the font-family.
Detail:
http://xahlee.org/js/ff_pre_ex.html
Xah
xah@xahlee.org
=E2=88=91 http://xahlee.org/
|
|
Posted by Alexander Clauss on September 13, 2006, 4:13 pm
Please log in for more thread options
> Summary: when encountering ex as a unit in css, FireFox (and iCab) did
> not take into account the font-family.
>
> Detail:
> http://xahlee.org/js/ff_pre_ex.html
You say, that Safari does it correct. On my system it does not. In fact
Safari, Firefox and iCab do all display the example more or less
identical: The text is wider than the box. And Opera makes the box much
wider than the text.
--
Alexander
|
|
Posted by David E. Ross on September 14, 2006, 7:22 pm
Please log in for more thread options
Xah Lee wrote:
> Summary: when encountering ex as a unit in css, FireFox (and iCab) did
> not take into account the font-family.
>
> Detail:
> http://xahlee.org/js/ff_pre_ex.html
>
> Xah
> xah@xahlee.org
> ∑ http://xahlee.org/
>
The ex unit of length is the HEIGHT of a lower-case x. The font used to
determine this unit is that of the element itself (unless the font-size
property is specified, in which case the font of the parent is used).
Here, your page uses the font of the <pre> element.
In some fonts, the height of the lower-case x is less than its width.
In Courier New (often used as the monospaced font within the <pre>
element), the height of the lower-case x -- defining the ex unit -- is
between 85% and 90% of the width. Thus, 70 characters in a <pre>
element will require more than 70ex if viewed with Courier New.
--
David E. Ross
<http://www.rossde.com/>
Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>
|
|
Posted by Stephen Poley on September 15, 2006, 3:25 pm
Please log in for more thread options
>Summary: when encountering ex as a unit in css, FireFox (and iCab) did
>not take into account the font-family.
>
>Detail:
>http://xahlee.org/js/ff_pre_ex.html
>
I suspect you haven't understood what the ex unit is.
Actually I'm not fully convinced the people who wrote the CSS spec did
either, because as defined it doesn't seem to have any use. See
http://www.xs4all.nl/~sbpoley/webmatters/emex.html
--
Stephen Poley
http://www.xs4all.nl/~sbpoley/webmatters/
|
|
Posted by Xah Lee on September 19, 2006, 12:35 am
Please log in for more thread options
Emacs and HTML Tips
Xah Lee, 2006-09-19
My website, XahLee.org, has over 3000 html pages as of today. About a
thousand pages are mirrors of Classic Literatures or manuals (e.g.
elisp manual at 850+ pages). These pages are semi-automatically
generated by scripts. The other 2000 or so pages are manually created
with emacs.
This page provides some tips about using Emacs with HTML. If you find
this page incomprehensible, please first be familiar with: Emacs
Intermediate.
In emacs, when you open a file ending in =E2=80=9Chtml=E2=80=9D, it'll
automatically open in html-mode.
First of all, put the following code in your emacs init file. (usually
at =E2=80=9C~/.emacs=E2=80=9D)
; do highlight selection
(transient-mark-mode t)
; turn on syntax highlighting
(font-lock-maximum-decoration 2)
; highlight matching parens.
(show-paren-mode t)
; when there is a selection, delete key deletes the region instead of
just a char.
(delete-selection-mode t)
Except the last one, the others can be found under the menu named
=E2=80=9COptions=E2=80=9D. If you are using the menu, be sure to also use
=E2=80=9COptions =E2=86=92 Save Options=E2=80=9D so that these are turned o=
n the next
time you start emacs.
Q: How to insert a tag?
A: html-mode provides many shortcuts to insert tags. Here's a list of
tags you can insert and their keyboard shortcuts and command names.
<h1> C-c 1 html-headline-1
<h2> C-c 2 html-headline-2
<p> C-c RET html-paragraph
<hr> C-c C-c - html-horizontal-rule
<ul> C-c C-c u html-unordered-list
<li> C-c C-c l html-list-item
For a complete list of shortcuts, do =E2=80=9CM-x html-mode=E2=80=9D, then =
=E2=80=9CC-h
m=E2=80=9D to see the list.
Q: How to close a tag?
A: Place your cursor at the place where you want to insert the closing
tag, then press =E2=80=9CC-c /=E2=80=9D.
Q: How to delete a tag?
A: Put your cursor on or inside the tag, then press C-c DEL. This will
delete both the beginning and ending tags. Very convenient.
Q: How to make the cursor jump to the end of the enclosing tag?
A: C-c C-f. Also, to move to the beginning of a tag pair, do C-c C-b.
The f is for forward, and b for backward.
Q: How to insert my custom tag?
A: Put the following code in your emacs init file. Then, can press 5 on
the keypad, and your custom tag will be inserted, and your cursor point
will be placed in between them.
(global-set-key [kp-5] 'insert-p)
(defun insert-p ()
"inserts HTML markup <p></p>."
(interactive)
(insert "<p>\n</p>")
(backward-char 5)
)
You can change the string in the above code so that it will insert
another tag that you use frequently, or even a text template, such as
headers and footers. You can also change the keyboard shortcut for
this. For example, you can have the F1, F2, F3... etc function keys
each one inserting a different tag for you.
For how to change the keyboard shortcut, see Defining Your Own Keyboard
Shortcuts.
Q: How to generate a link?
A: Press C-c C-c h (html-href-anchor). Emacs will then ask you to type
a url, then insert it with the closing =E2=80=9C</a>=E2=80=9D, with your cu=
rsor
placed before it so that you can type the link text.
Alternatively, you can place the following lisp code in your emacs init
file:
(defun wrap-url ()
"Make thing at cursor point into a html link.\n
Example: http://wikipedia.org/
becomes
<a href=3D\"http://en.wikipedia.org/\">http://wikipedia.org/</a>"
(interactive)
(re-search-backward "[\n\t ()]" nil t)
(looking-at "[\n\t ()]?\([^\n\t ()]+\)")
(let (
(p1 (match-beginning 1))
(p2 (match-end 1))
(url (match-string 1))
)
(delete-region p1 p2)
(goto-char p1)
(insert "<a href=3D\"" url "\">" url "</a>" )
)
)
(add-hook 'html-mode-hook
(lambda ()
(define-key html-mode-map "\M-5" 'wrap-url)
)
)
With this code, pressing M-5 will automatically make the url your
cursor is on into a link.
Q: How to do a inline image?
A: Press C-c C-c i (html-image). Alternatively, you can place the
following into your emacs init file.
(defun tag-image ()
"Replace an image file name at point with an HTML img tag.
eg: x.jpg became <img src=3D\"x.jpg\" alt=3D"" width=3D\"123\"
height=3D\"456\">."
(interactive)
(let ((imgName (thing-at-point 'filename))
(bounds (bounds-of-thing-at-point 'filename)))
(delete-region (car bounds) (cdr bounds))
(let ((image-size
(let ((ximg (create-image (concat default-directory
imgName))))
(image-size ximg t))))
(let ((width (number-to-string (car image-size)))
(height (number-to-string (cdr image-size))))
(insert "<img src=3D\"" imgName "\" "
"alt=3D\"\" "
"width=3D\"" width
"\" "
"height=3D\"" height
"\">")))))
(add-hook 'html-mode-hook
(lambda ()
(define-key html-mode-map "\M-4" 'tag-image)
)
)
With this code, pressing M-4 while in html-mode will make the url or
relative path into a inline image, with =E2=80=9Calt=E2=80=9D and =E2=80=9C=
height=E2=80=9D and
=E2=80=9Cwidth=E2=80=9D attributes.
Q: How to wrap a tag around the word at the cursor point?
A: put the following in your emacs init file.
(defun wrap-text (aa bb)
"Wrap strings aa and bb around a word or region."
(interactive)
(if (and transient-mark-mode mark-active)
(let ((e1 (region-beginning)) (e2 (region-end)))
(kill-region e1 e2)
(insert aa)
(yank)
(insert bb)
)
(let ((tt (thing-at-point 'word)))
(skip-chars-backward "^ \t\n,.;?:!<>\'=E2=80=98=E2=80=99=E2=80=9C=E2=
=80=9D")
(delete-char (save-excursion (skip-chars-forward "^
\t\n.,;?:!<>\'=E2=80=98=E2=80=99=E2=80=9C=E2=80=9D")))
(insert aa tt bb) )
)
)
(defun wrap-span-xb ()
"Wrap a HTML span around a word or region."
(interactive)
(wrap-text "<span class=3D\"xb\">" "</span>")
)
With the above code, =E2=80=9CM-x wrap-span-xb=E2=80=9D will wrap a <span
class=3D"xb"> and </span> around the word your cursor is on. You can
change the text so that you can have different commands for tag wraps.
You can also make them into a keyboard shortcuts so that different
press of keys will wrap different tags around the word. (such as, bold,
italic, or any css class or style).
For how to define keyboard shortcuts, see Defining Your Own Keyboard
Shortcuts.
Q: How to find-replace a region with some text?
A: If you have a need to replace several pairs of characters, you can
define a lisp function that does this easy on a region. For example,
place the following in your emacs init file:
(defun replace-string-pairs-region (start end mylist)
"Replace string pairs in region."
(save-restriction
(narrow-to-region start end)
(mapc
(lambda (arg)
(goto-char (point-min))
(while (search-forward (car arg) nil t) (replace-match (cadr
arg)) )
) mylist
)
)
)
(defun replace-greek (start end)
"Replace math symbols. e.g. alpha to =CE=B1."
(interactive "r")
(replace-string-pairs-region start end '(
("alpha" "=CE=B1")
("beta" "=CE=B2")
("gamma" "=CE=B3")
("theta" "=CE=B8")
("lambda" "=CE=BB")
("delta" "=CE=B4")
("epsilon" "=CE=B5")
("omega" "=CF=89")
("Pi" "=CF=80")
)
)
)
With the above code, you can select a region, then press M-x
replace-greek, and have all greek letter names replaced by their
letters. This will be handy when you write a lot math. You can bind
this command to a Keyboard Shortcuts for easy operation.
Also, you can change the code to make it replace other strings. For
example, the following are required:
> =E2=86=92 >
< =E2=86=92 <
& =E2=86=92 &
The following, changing html entities to actual unicode characters
makes the html source code more elegant and readible.
“ =E2=86=92 =E2=80=9C
” =E2=86=92 =E2=80=9D
é =E2=86=92 =C3=A9
© =E2=86=92 =C2=A9
Q: How to switch to browser and preview?
A: In html-mode, do C-c C-v. You can also get a textual preview by
pressing C-c TAB, which will hide all the tags. Press C-c TAB again to
show tags.
----
This post is archived at:
http://xahlee.org/emacs/emacs_html.html
Xah
xah@xahlee.org
=E2=88=91 http://xahlee.org/
|
| Similar Threads | Posted | | DIV Scrollbar problem in FireFox... | May 23, 2005, 7:01 am |
| iframe problem in firefox | February 5, 2006, 9:31 pm |
| Form problem and Firefox | April 6, 2006, 7:54 am |
| html4/strict.dtd & IE/firefox problem | April 21, 2005, 9:34 am |
| Table layout problem in Firefox/IE6 | June 14, 2005, 8:42 am |
| Problem with Firefox viewing html | January 22, 2007, 4:50 pm |
| Frameset look and behavior problem in Firefox... Help Please! | February 22, 2007, 1:33 pm |
| Weird CSS Link problem in Firefox | May 14, 2008, 6:53 pm |
| Strange Problem with Sidebar and scripts in firefox | February 10, 2005, 4:49 am |
| java apploet problem with mozilla and firefox | February 22, 2005, 9:42 pm |
|
XML Sitemap