Christian Huml: Text fix setzen

Hallo wieder mal 😀

gibt es Möglichkeiten einen Text so fix zu setzen also einzurücken wie Beispielsweise text-align oder text-indent nur dass der Abstand selbst bestimmt wird und dies bei Größenänderungen gleich bleibt?

Mit freundlichen Grüßen

Christian

akzeptierte Antworten

  1. Hi Christian,

    was genau meinst du damit:

    nur dass der Abstand selbst bestimmt wird und dies bei Größenänderungen gleich bleibt?

    Sagt dir das Boxen-Modell was? Mit Padding und Margin kannst du sowohl den äußeren als auch den inneren Abstand des HTML-Elements, gemessen an seinem Rahmen (Border) festlegen.

    Gruß Maetzzen

    Edit: Link geändert

    1. Sagt dir das Boxen-Modell was? Mit Padding und Margin kannst du sowohl den äußeren als auch den inneren Abstand des HTML-Elements, gemessen an seinem Rahmen (Border) festlegen.

      @Maetzzen

      Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

      Mit freundlichen Grüßen

      Christian

      1. Hallo

        Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

        In deinem Beispiel hat es nichts mit Box-Sizing zu tun. Das könnte es aber, wenn du andere Eigenschaften als text-indent manipulieren würdest, z.B. margin oder padding.

        Du legst für div.inhalt einen Wert von 15em für text-indent fest. Wird nun die Schriftgröße skaliert, ändert sich mit ihr auch der von ihr abhängige Wert der Einrückung. Das liegt daran, dass du eine Maßeinheit (em) benutzt, die direkt von der konkreten Schriftgröße abhängig ist. Die Einrückung wächst oder schrumpft also proportional zur aktuellen Schriftgröße.

        Wenn du eine von der Schriftgröße unabhängige, immer gleiche Einrückung benutzen willst, musst du eine passende Einheit verwenden. Tatsächlich kannst du hier px verwenden, es ginge auch rem, eine Einheit, die zwar von der im Browser festgelegten Schriftgröße abhängig ist, also in verschiedenen Browsern einen verschiedenen Wert haben kann, die sich aber beim zoomen einer Seite in einem Browser nicht verändert.

        Tschö, Auge

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
        1. @@Auge

          Tatsächlich kannst du hier px verwenden

          Nein. Abgesehen davon, dass px so gut wie immer eine schlechte Wahl ist, ändert sich beim Zoomen die dargestellte Größe von 1px …

          es ginge auch rem

          … und natürlich auch die von 1rem.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. @Auge @Gunnar Bittersmann

          Das einzige was mir gerade noch eingefallen ist Codepen dadurch würde der Text immer gleich bleiben.

          Mit freundlichen Grüßen

          Christian

          1. @Auge @Gunnar Bittersmann

            Nachtrag:

            Oder habt Ihr vielleicht noch andere Vorschläge? Hab auch schon bezüglich Tabelle spekuliert… Mir ist aufgefallen dass bei einem Zoom ob em, rem immer eine Verschiebung gibt.

            1. Hallo Christian,

              wenn ich dich richtig verstanden habe, soll der Text trotz Zoom immer denselben Abstand zum Rand behalten. Mit text-indent: 10vw; passt sich der Abstand an die Breite des Viewports an, was das "Zoom-Problem" behebt, jedoch bei verschieden "breiten" Ausgabefenstern wieder anders aussieht.

              Es gibt soweit ich hier gelernt habe auch keine Möglichkeit, dass Webseiten auf allen Geräten und Browsern exakt identisch dargestellt werden. Das soll aber auch nicht dein Ziel sein. Bei kleineren Viewports ist es oft hilfreich auf weniger wichtige Grafiken zu verzichten und Texte beispielsweise größer / lesbar darzustellen.

              Mit @media kannst du dabei dein Stylesheet auf verschiedene Endgeräte mit unterschiedlichen Viewports anpassen. Siehe hier.

              Also: Webseite soll/muss nicht überall exakt gleich aussehen.

              Aber: Webseite soll/muss für verschiedene Endgeräte, Browser etc. getestet werden.

              Gruß Maetzzen

              1. Hallo @Maetzzen

                dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte.

                Mit freundlichen Grüßen

                Christian

                1. Hallo Christian Huml,

                  dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte.

                  Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

                    Wie meinst du das genau?

                    Mit freundlichen Grüßen

                    Christian

                    1. Hallo Christian Huml,

                      dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

                      Wie meinst du das genau?

                      Du zuerst: Was meinst du mit „dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte“?

                      Bis demnächst
                      Matthias

                      --
                      Rosen sind rot.
                      1. Hallo,

                        Du zuerst:

                        Ne, du!

                        Ne, du!

                        bis einer weint!

                        Gruß
                        Kalk

                        1. Hallo Tabellenkalk,

                          bis einer weint!

                          Genau.

                          Bis demnächst
                          Matthias

                          --
                          Rosen sind rot.
                          1. @@Matthias Apsel

                            bis einer weint!

                            Genau.

                            Ich geh mal Popcorn holen. Werden noch Wetten angenommen?

                            LLAP 🖖

                            --
                            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            1. Hallo,

                              Ich geh mal Popcorn holen. Werden noch Wetten angenommen?

                              holst du nummeriertes Popcorn?

                              Gruß
                              Kalk

                      2. dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

                        Wie meinst du das genau?

                        Du zuerst: Was meinst du mit „dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte“?

                        Ich meinte damit wie in meinem Beispiel: Codepen dass der Text immer an gleicher Stelle bleibt. Ich beziehe mich hierbei nur auf PC Bildschirme, da es mir einfach linksbündig nicht gefällt. Hierfür wieder ein weiteres Beispiel: Codepen.

                        Der Text: "Text Beispiel" soll genau bündig mit der roten Box sein. Am besten wäre es wenn es alle PC Bildschirme abdecken würde. Bei Handys, Tablets nicht relevant da linksbündig per Media Queries.

                        Auf dieses hin komme ich wieder dass bei Änderung des Zoomfaktors oder Breite des Bildschirms der Text nicht bündig wie in Beispiel rote Box dargestellt wird. In diesem Fall schon da Text-align jedoch nicht bei text-indent.

                        Mit freundlichen Grüßen

                        Christian

                        1. @@Christian Huml

                          Der Text: "Text Beispiel" soll genau bündig mit der roten Box sein.

                          Da du die Breite der roten Box und ihren Abstand von der Mittellinie kennst, kannst du doch deren Abstand vom linken Rand berechnen (calc(50% - 11em)) und dem Text entsprechendes padding-left geben.

                          Oder du machst es mit Grid.

                          LLAP 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. @Gunnar Bittersmann

                            Hört sich gut an. 😀

                          2. @Gunnar Bittersmann

                            Ist Grid auch möglich auf Grafiken?

                            Mit freundlichen Grüßen

                            Christian

                            1. Hallo Christian Huml,

                              Ist Grid auch möglich auf Grafiken?

                              Was möchtest du erreichen?

                              Bis demnächst
                              Matthias

                              --
                              Rosen sind rot.
                              1. @Matthias Apsel

                                Was möchtest du erreichen?

                                Ich möchte die SVG bündig mit der Box setzen.

                                Mit freundlichen Grüßen

                                Christian

                                1. @Matthias Apsel

                                  Leider habe ich von dir noch keine Antwort erhalten 😉 Was wäre deiner Meinung sinnvoller Grid oder Calc?

                                  Mit freundlichen Grüßen

                                  Christian

                                  1. Hallo Christian Huml,

                                    Leider habe ich von dir noch keine Antwort erhalten 😉 Was wäre deiner Meinung sinnvoller Grid oder Calc?

                                    Wo kann man sich das anschauen?

                                    Bis demnächst
                                    Matthias

                                    --
                                    Rosen sind rot.
                                  2. @@Christian Huml

                                    Leider habe ich von dir noch keine Antwort erhalten

                                    Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

                                    LLAP 🖖

                                    --
                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                    1. @Gunnar Bittersmann

                                      Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

                                      Die Ausrichtung auf die Box soll einmal für eine Grafik gelten und einen Text. Nun besteht die Frage ob dies alles entweder über Calc oder Grid möglich ist oder ob beides verwendet werden muss um dies realisieren zu können.

                                      Mit freundlichen Grüßen

                                      Christian

                                      1. @@Christian Huml

                                        Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

                                        Die Ausrichtung auf die Box soll einmal für eine Grafik gelten und einen Text. Nun besteht die Frage ob dies alles entweder über Calc oder Grid möglich ist oder ob beides verwendet werden muss um dies realisieren zu können.

                                        Deine Frage nach dem Mittel (calc() oder Grid) hatte ich schon verstanden. Nur dein Ziel nicht. Was genau willst du?

                                        LLAP 🖖

                                        --
                                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. @@Christian Huml

        Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

        Das hat damit zu tun, dass sich beim Zoomen die dargestellte Größe von 1(r)em ändert. Und das ist auch gut so.™

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @Maetzzen

    Durch die verschiedenen Bildschirme wird die Texteinrückung anders dargestellt die sollte immer gleich bleiben.

    1. @@Christian Huml

      Durch die verschiedenen Bildschirme wird die Texteinrückung anders dargestellt die sollte immer gleich bleiben.

      Du hast das in % angebeben, willst aber em oder rem verwenden?

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. @Gunnar Bittersmann

        Du hast das in % angebeben, willst aber em oder rem verwenden?

        Ich habe überall em verwendet, wäre rem deiner Meinung nach sinvoller?

        Mit freundlichen Grüßen

        Christian

        1. @@Christian Huml

          Ich habe überall em verwendet, wäre rem deiner Meinung nach sinvoller?

          Das kommt darauf an, was du erreichen möchtest.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory