Блог

Главная - Вопросы по программированию - Почему мой HTML-список перемещается с экрана в WebView?

Почему мой HTML-список перемещается с экрана в WebView?

#android #html #list #webview #indentation

#Android #HTML #Список #webview #отступ

Вопрос:

Я загружаю некоторые локальные HTML-файлы в виде фрагментов WebView внутри ViewPager. Я ломал голову над отступом в нумерованном списке, когда я увеличиваю размер шрифта, список перемещается влево и даже перемещается так, что он начинается с экрана.

Наименьший размер шрифта

Следующий размер

введите описание изображения здесь

введите описание изображения здесь

С этим демонстрационным HTML не связан CSS:

 <html>
<head>
        <meta name="viewport" content="user-scalable=no, width=device-width">
</head>
<body>
        <p>This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. </p>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
             </ol>
</body>
</html>

Ответ №1:

Это поведение элемента HTML по умолчанию ol . Посмотрите на скрипку.

Рекомендация W3C для поставщиков браузеров отображать ol элементы (типичные свойства отображения по умолчанию) такова:

 ol {
  display: block;
  list-style-type: decimal;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px; 
}

padding-start: 40px; Здесь интересная часть. Поскольку заполнение не определено в пропорциональных единицах (px), оно не относится к изменению размера шрифта или следует за ним. Он всегда будет 40 пикселей.

Таким образом, одним из решений было бы установить для отступа слева от ol элемента пропорциональную единицу (em):

 ol {
    padding-left: 1.5em;
}

Вот скрипка.

Вот три разных подхода к настройке заполнения:

1. Встроенный стиль

Используйте style атрибут:

 <ol style="padding-left: 1.5em;">
  <li>Item 1</li>
  <li>Item 1</li>
  <!-- ... -->
</ol>

2. style Элемент

 <!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8 />
    <title>your title</title>
    <style>
      ol {
        padding-left: 1.5em;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 1</li>
      <!-- ... -->
    </ol>
  </body>
</html>

3. Внешняя таблица стилей

Я рекомендую этот подход, потому что у вас есть четкое разделение между разметкой и стилями. Привяжите внешний CSS-файл к вашему HTML-документу.

HTML-документ:

 <!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8 />
    <title>your title</title>
    <link rel=stylesheet href="path/to/your/css/style.css"/>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 1</li>
      <!-- ... -->
    </ol>
  </body>
</html>

Стиль файла CSS.css:

 ol {
    padding-left: 1.5em;
}

Следите за направлением текста в вашем HTML-документе. Если у вас есть направление справа налево, вы должны установить отступы вправо, а не отступы влево. Используя <html dir=ltr> или <html dir=rtl> , соответственно, вы можете использовать это:

 [dir=ltr] ol {
    padding-left: 1.5em;
}

[dir=rtl] ol {
    padding-right: 1.5em;
}

Комментарии:

1. Я с удивлением обнаружил, что вы правы насчет проблемы, но я не могу использовать значения em, как вы это делали, поскольку размер текста устанавливается из фрагмента WebView: WebView.getSettings().setDefaultFontSize (размер шрифта);

2. Вам не нужно устанавливать размер шрифта. Это было просто для визуализации проблемы. Вам просто нужен padding-left (соответственно padding-right ) для ol элемента. Я добавил три разных подхода к своему ответу, чтобы задать заполнение .

3. Вы неправильно поняли, мне нужно иметь возможность устанавливать размер шрифта с помощью этого метода, но у меня нет доступа к CSS из кода, чтобы иметь возможность динамически настраивать параметры, поэтому мне нужен CSS, который будет работать для нескольких размеров шрифта. Возможно ли это?

4. @Leon Я бы подумал, что если вы установите размер шрифта и будете использовать em единицы в css, это будет работать должным образом. em изменяет значение на масштаб с установленным размером шрифта. setDefaultFontSize использует единицы sp, которые не существуют в css. Поскольку это так, очевидно, что размер преобразуется во что-то понятное браузеру :). При изменении размера шрифта браузер повторно обработает css, и em единицы будут пересчитаны заново.

5. @FabianMebus Я был далеко и вернулся к этому, и теперь все это, кажется, работает. Должно быть, в то время кэшировался старый CSS. Спасибо за вашу помощь