BBEdit 15 preview with BBEdit
153 views
Skip to first unread message
R B Cohen
Apr 16, 2024, 10:01:37 PM4/16/24
to BBEdit Talk
When I view in BBEdit (free version), everything looks great. But when I switch to Safari, not so. The type looks "10 times" larger and spacing and alignment is different. My HTML pages use CSS stylesheet for formatting.
Most notable, font-size set to 9px looks more like 18px in Safari bother offline and online, but renders fine in BBEdit preview.
I'm using Safari Version 17.4.1 (macOS Sonoma).
Bruce Van Allen
Apr 16, 2024, 10:12:22 PM4/16/24
to bbe...@googlegroups.com
Can you post a minimal example HTML page or fragment that we can look at both ways? I don’t recall seeing major text size or other formatting differences between BBEdit preview and Safari. Quite a few settings might be impinging (BBEdit, Safari, System) ...
— Bruce
_bruce__van_allen__santa_cruz_ca_
> --
> This is the BBEdit Talk public discussion group. If you have a feature request or believe that the application isn't working correctly, please email "sup...@barebones.com" rather than posting here. Follow @bbedit on Mastodon: <https://mastodon.social/@bbedit>
> ---
> You received this message because you are subscribed to the Google Groups "BBEdit Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bbedit+un...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/e7d426b9-16d1-4c69-8944-de82c561c4b6n%40googlegroups.com.
— Bruce
_bruce__van_allen__santa_cruz_ca_
> This is the BBEdit Talk public discussion group. If you have a feature request or believe that the application isn't working correctly, please email "sup...@barebones.com" rather than posting here. Follow @bbedit on Mastodon: <https://mastodon.social/@bbedit>
> ---
> You received this message because you are subscribed to the Google Groups "BBEdit Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bbedit+un...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/e7d426b9-16d1-4c69-8944-de82c561c4b6n%40googlegroups.com.
Raizel
Apr 17, 2024, 12:34:17 AM4/17/24
to BBEdit Talk
Here's capture from BBEdit and Safari Version 17.4.1.
My CSS for <body> is set: font-size: 12px;
My CSS for .footer is set: font-size: smaller; as 9px or ?em (can't remember but about = to 9px) didn't work either.
My CSS for .footer is set: font-size: smaller; as 9px or ?em (can't remember but about = to 9px) didn't work either.
Bruce Van Allen
Apr 17, 2024, 12:49:09 AM4/17/24
to bbe...@googlegroups.com
I meant the HTML text and relevant style blocks/sheets.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/e95ee939-a0a7-476c-b37b-4227b62c4939n%40googlegroups.com.
> <Screenshot BBEdit 15.jpg><Screenshot Safari.jpg>
> <Screenshot BBEdit 15.jpg><Screenshot Safari.jpg>
Raizel
Apr 17, 2024, 12:58:43 AM4/17/24
to BBEdit Talk
body {
font-family: Verdana, Helvetica, sans-serif;
background-color: #333333;
color: #FFF;
font-size: 12px;
text-align: left;
/* RBC added (top, right, bottom, left) */
}
font-family: Verdana, Helvetica, sans-serif;
background-color: #333333;
color: #FFF;
font-size: 12px;
text-align: left;
/* RBC added (top, right, bottom, left) */
}
.content {
padding: 16px;
padding: 16px;
}
<div class="content">
<p>Note: Please include the person's Reference Number, eg: <b>(A66)</b>.. and more text.</ p>
===========================
.footer {position: fixed;
left: 0;
bottom: 0;
width: 70%;
background-color: #333333;
color: #f1f1f1;
font-family: Georgia, Times, serif;
font-style: italic;
font-size: smaller;
padding: 0 0 0 20px;
<div class="footer">
<img src="images/image.jpg<br>
Thanks go to the relatives that.</div>
<img src="images/image.jpg<br>
Thanks go to the relatives that.</div>
The is in a <div> and uses <p> that I believe follows the body statement as I didn't define <p> separately.
Bruce Van Allen
Apr 17, 2024, 1:16:34 AM4/17/24
to bbe...@googlegroups.com
I think before going to Preview (in BBEdit or Safari) it would be good to use BBEdit’s syntax checker - Menu: Markup -> Check -> Document Syntax.
Could be copy-paste issues, but in your HTML as shown:
- the div with class=“content” needs a closing div tag, after the closing p tag (not necessarily right after);
- the img element needs at least a closing double-quote mark on the file name and a closing angle bracket, if not also alt and other image attributes.
See what Check Document Syntax tells you.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/58a63a25-52fd-4822-8952-adcc69b2f87an%40googlegroups.com.
Could be copy-paste issues, but in your HTML as shown:
- the div with class=“content” needs a closing div tag, after the closing p tag (not necessarily right after);
- the img element needs at least a closing double-quote mark on the file name and a closing angle bracket, if not also alt and other image attributes.
See what Check Document Syntax tells you.
Raizel
Apr 17, 2024, 1:21:04 AM4/17/24
to BBEdit Talk
Both are snippets so missed copying into message, sorry. The CSS and HTML both validated using W3C validator. The free Bbedit version doesn't have validation feature which in essence does same thing as W3C.
Bruce Van Allen
Apr 17, 2024, 2:06:02 AM4/17/24
to bbe...@googlegroups.com
See how the following complete minimal html doc renders in BBEdit preview and all browsers you have available. It would be great if you have at least one more way to view than just Safari and BBEdit preview, to help narrow the problem.
This HTML links in no style sheets or style elements. The only styling here sizes p text in the main element at 16 points and in the footer element at 12 points. 16 points is the default text size in most browsers.
(The tags for the head element aren’t necessary any more, but BBEdit’s checker still dings you if they’re omitted.)
I hope this shows as plain text in your email :)
######## Don’t include this line #########
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page Title</title>
</head>
<body>
<main style="font-size:16pt;">
<div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</main>
<footer style="font-size:12pt;">
<hr>
<h1>This is a heading in the footer</h1>
<p>This is a paragraph in the footer.
</footer>
</body>
</html>
######## Don’t include this line #########
How this looks in different renderings may point to the problem.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/d25fd751-4952-4b36-b4f0-290caf36f30dn%40googlegroups.com.
This HTML links in no style sheets or style elements. The only styling here sizes p text in the main element at 16 points and in the footer element at 12 points. 16 points is the default text size in most browsers.
(The tags for the head element aren’t necessary any more, but BBEdit’s checker still dings you if they’re omitted.)
I hope this shows as plain text in your email :)
######## Don’t include this line #########
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page Title</title>
</head>
<body>
<main style="font-size:16pt;">
<div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</main>
<footer style="font-size:12pt;">
<hr>
<h1>This is a heading in the footer</h1>
<p>This is a paragraph in the footer.
</footer>
</body>
</html>
######## Don’t include this line #########
How this looks in different renderings may point to the problem.
Message has been deleted
Message has been deleted
Raizel
Apr 17, 2024, 1:49:05 PM4/17/24
to BBEdit Talk
Okay, I tried yours (testHTML) and tried a stripped down (removed content) of my actual index page (TESTindex) with the CSS. (I have two other sets of pages and CSS that comprise the site.)
My HTML/CSS skills are very rusty having not done a web page in decades!!! And back then, had Dreamweaver. This is my first attempt to hand code-only a site in BBEdit (just under 100 pages). Display is off but am getting W3C verified HTML, CSS, links.
Kerri Hicks
Apr 17, 2024, 3:15:52 PM4/17/24
to bbe...@googlegroups.com
This might be a silly "turn it off, turn it on again" suggestion, but it's happened to me more than once -- if you're in Safari, and you do cmd-0 (that's a zero), does it change the font size? Sometimes I'll accidentally hit a keystroke that zooms the text, and I'll spend way too long trying to figure out why it's too big, when I've accidentally zoomed it.
--Kerri
To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/34a348b4-dfae-4133-9b7d-5f93e4660b31n%40googlegroups.com.
Raizel
Apr 17, 2024, 3:19:37 PM4/17/24
to BBEdit Talk
No, not silly. Ive done that too. However, in this case, it's strictly under CSS control only. In fact, if I do hit the A | A to increase/decrease, the page goes wonky so I'd know.
Reply all
Reply to author
Forward
0 new messages