Which one do you prefer?

[icearch]

I’m working on some project and learning formatting on the go. Then I came to this question:



I have two method that accomplish the same effect :

<div class="yinyong">
<p>边栏：铁与妖精</p>
<p class="main-ss">随身携带铁器是个绝佳的保命方法，铁乃所有妖精的克星。你常会听到“寒铁”这个说法，但其实任何形态的铁都能有效防御妖精种。我们世界中无处不在的铁器，正是限制精灵在此界活动程度的重要因素。</p>
</div>

<blockquote>
<p>边栏：铁与妖精</p>
<p class="main-ss">随身携带铁器是个绝佳的保命方法，铁乃所有妖精的克星。你常会听到“寒铁”这个说法，但其实任何形态的铁都能有效防御妖精种。我们世界中无处不在的铁器，正是限制精灵在此界活动程度的重要因素。</p>
</blockquote>

And the corresponding CSS:

.yinyong
{
	margin-left:0.8em; 
	padding-left:1em; 
	border-left:solid;
	border-width:0.2em;

}

blockquote
{
	margin-left:0.8em; 
	margin-right:0em; 
	padding-left:1em; 
	padding-right:0em;
	border-left:solid;
	border-width:0.2em;

}

So which one do you prefer in the content of code integrity and easy for maintenance?

[DNSB]

Whichever you prefer. Other than wondering why you have the padding-right and margin-right lines in only one of the CSS entries, it comes down to personal preferences. I would prefer the blockquote but as already mentioned, that would be a personal preference.

[icearch]

Originally Posted by DNSB

Whichever you prefer. Other than wondering why you have the padding-right and margin-right lines in only one of the CSS entries, it comes down to personal preferences. I would prefer the blockquote but as already mentioned, that would be a personal preference.

Because blockquote have defult marging and padding to the right which div didn't, so to accomplish the same outcome it needs to be addressed.

Padding-right should have no effect, I just forget to delete it.

[DNSB]

Originally Posted by icearch

Because blockquote have defult marging and padding to the right which div didn't, so to accomplish the same outcome it needs to be addressed.

Padding-right should have no effect, I just forget to delete it.

True. My tendency is adding both the left and right margin/padding elements to make sure that I am overriding any defaults that may have been set higher in my CSS.

[JSWolf]

Originally Posted by icearch

Because blockquote have defult marging and padding to the right which div didn't, so to accomplish the same outcome it needs to be addressed.

Padding-right should have no effect, I just forget to delete it.

You can forget the padding and use left/right/top/bottom margins as needed for the blockquote.

I set blockquote to a left/right margin of 1.5em. I know the default is 1em for top/bottom, but I have it in there anyway. The default left/right margins is 2em.

blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 1em;
  margin-left: 1.5em;
}

[icearch]

After second thought, I think I might well just stick to div, as though some reader might override my css, div still have much better backward compatibility than blockquote. Some random niche reader might have trouble rendering blockquote, and in case someone do override my css, div still is my perfer style, especially on smartphone that have reletively narrow screen, it just can't afford that extra margin comes with blockquote.

[JSWolf]

Originally Posted by icearch

After second thought, I think I might well just stick to div, as though some reader might override my css, div still have much better backward compatibility than blockquote. Some random niche reader might have trouble rendering blockquote, and in case someone do override my css, div still is my perfer style, especially on smartphone that have reletively narrow screen, it just can't afford that extra margin comes with blockquote.

That's incorrect. Your blockquote's CSS will not be overridden. You do not have to worry about some niche software.

As you can see, you can override the blockquote defaults and set whatever margins you want. Also, if you look at programs such a Kindle and Books, you'll see they have overly wide margins on a phone. It depends one what program you use. Any program that doesn't respect the CSS well enough is garbage and should not be used.

So yes, use a blockquote as that's actually the best way to code a blockquote.

[Jellby]

Originally Posted by JSWolf

You can forget the padding and use left/right/top/bottom margins as needed for the blockquote.

Except that with a border, you have to use both padding and margin if you want to control the spacing inside and outside the border.

[icearch]

Originally Posted by Jellby

Except that with a border, you have to use both padding and margin if you want to control the spacing inside and outside the border.

That's exactly what I have done with the left margin and padding. It adds up to 1em. And chinese characters are always 1em squares, the final result will be so aesthetically pleasing.

[Turtle91]

As mentioned already, you can set the css for both so they look exactly the same on any device. The only real difference is a semantic one. I would use a <blockquote> when, in fact, coding a long quote. Otherwise I would use a <div>.

Some semantics are more important than others, but if you get in the habit of using the semantically correct tag you will avoid most potential problems.

[KevinH]

Originally Posted by Turtle91

As mentioned already, you can set the css for both so they look exactly the same on any device. The only real difference is a semantic one. I would use a <blockquote> when, in fact, coding a long quote. Otherwise I would use a <div>.

Some semantics are more important than others, but if you get in the habit of using the semantically correct tag you will avoid most potential problems.

Very good advice! The importance of using the semantically correct tag for those users with Accessibility needs is high.

[JSWolf]

Originally Posted by Turtle91

As mentioned already, you can set the css for both so they look exactly the same on any device. The only real difference is a semantic one. I would use a <blockquote> when, in fact, coding a long quote. Otherwise I would use a <div>.

Some semantics are more important than others, but if you get in the habit of using the semantically correct tag you will avoid most potential problems.

Why would you use a <div> for a short quote and not a <blockquote>?

[Turtle91]

The <blockquote> HTML element indicates that the enclosed text is an extended quotation, usually not a short one liner. This is visibly offset from the regular text somehow.

<blockquote cite="https://screenrant.com/star-wars-best-yoda-quotes/">
<p>Master Yoda was an endless fount of wisdom to his Jedi proteges in Star Wars, and he had no shortage of quotes distilling that wisdom. Ever since his introduction in The Empire Strikes Back, Yoda has been a symbol of the series, one of the most recognizable characters in all science fiction, and one of the strongest Jedi ever. Always ready to dish out insights into the Force to any other character who needed it (even if they didn't always follow it), Yoda played his role as a teacher perfectly.</p>

<p>Some of his teachings were incredibly quotable, and Yoda's unique speech pattern has elevated some of his wisdom from memorable to iconic. Though wise, he was not a perfect teacher, as one of Yoda's students turned to the dark side. While it can be hard to narrow down the greatest of his sayings, here are 20 of Yoda's best quotes, ones that have the most meaning to the story and provide the most guidance and truth outside the movies.</p>

<p>Part of what made Yoda so wise was that he never stopped searching for wisdom. In Star Wars: Episode II - Attack of the Clones, Yoda seeks a youngling's help with finding Kamino. This proves that Yoda was always open to new knowledge, even from the most unlikely of places. It also showed that keeping an open mind can solve problems that seem to have no solution.</p>

<p class="sig">~ <cite>Marcelo Leite</cite>, Aug 2024</p>
</blockquote>

There is no need to offset a short quote visibly...it just flows with the text

<p>I was listening to the words of wisdom intently.</p>
<p>"Into the flow of normal text, a short quote incorporated is," said Master Yoda.</p>
<p>Now I knew why he was the Master.</p>

Anything else that does not fit within that semantic definition would rightfully fall under a <div>.

For example, a tavern sign, a business card, a handwritten letter...

<div class="sign">
  <p>Fuller's Tavern</p>
  <img class="floatleft" alt="two steins" src="..."/>
  <img class="floatright" alt="d20" src="..."/>
  <p>Gaming, Grog &amp; Good Times</p>
</div>

<div class="card">
  <img class="center" alt="remote" src="..."/>
  <p>« Gameologist »</p>
</div>

<div class="write">
  <p>Dear Jon,</p>
  <p>I refer to the recent death of the technical manager at your company and hereby apply for the replacement of the deceased Manager.</p>
  <p>Each time I apply for a job, I get a reply that there's no vacancy but in this case I have caught you red-handed and you have no excuse because I even attended the funeral to be sure that he was truly dead and buried before applying.</p>
  <p>Attached to my letter is a copy of my CV and his death certificate.</p>
  <p class="sig">Morbidly yours,<br/><a href="https://www.careeraddict.com/7-funniest-cover-letters"/></p>
</div>

[icearch]

Originally Posted by KevinH

Very good advice! The importance of using the semantically correct tag for those users with Accessibility needs is high.

Talking about semantic, I think to encourage people using more <em> and <strong> instead of <i> and <b>, it is helpful to add dedicated button in Sigil. Last time i checked there are none. Especially the latter ones are longer and people tends not to use them.

[Turtle91]

I’ve created two “clips” buttons for exactly that purpose:

STRONG  <strong>\1</strong>
EM      <em>\1</em>

When you have them on the clips bar it is very easy to use!